如何使整个可点击的表格（表格样式div）

是的，我知道，这个问题已被问及很多次，一个可能的解决方案是将style="display:block;"添加到链接。如何使整个可点击的表格（表格样式div）

出于某种原因，这个解决方案不符合表格样式的DIV工作：

HTML：

<div class="table"> 
<div class="tablerow"> 

    <div class="left"> 
    <a href="/something.html" style="display:block"> 
    This is a link</a>  
    </div> 

    <div class="right"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div> 
</div> 
</div>

CSS：

.table{ 
    width:500px; 
    display:table; 
} 

.tablerow{ 
    display:table-row; 
} 


.left{ 
    width:50%; 
    background:green; 
    display:table-cell; 
    padding:5px; 
} 


.right{ 
    width:50%; 
    display:table-cell; 
    background:red; 
    padding:5px; 
}

如您所见，空的绿色空间只能水平点击，但不能垂直点击。我也试过：

<a href="/something.html" style="display:block"><div class="left">This is a link</div></a>

但它没有帮助。

来源

2017-02-22 yoyoyo

您需要将height: 100%;添加到链接，.left和.tablerow元素。

.table{ 
 
    width:500px; 
 
    display:table; 
 
} 
 

 
.tablerow{ 
 
    display:table-row; 
 
    height: 100%; 
 
} 
 

 

 
.left{ 
 
    width:50%; 
 
    background:green; 
 
    display:table-cell; 
 
    padding:5px; 
 
    height: 100%; 
 
} 
 

 

 
.right{ 
 
    width:50%; 
 
    display:table-cell; 
 
    background:red; 
 
    padding:5px; 
 
}

<div class="table"> 
 
<div class="tablerow"> 
 

 
    <div class="left"> 
 
    <a href="/something.html" style="display:block;height:100%;"> 
 
    This is a link</a>  
 
    </div> 
 
    
 
    <div class="right"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </div> 
 
</div> 
 
</div>

来源

2017-02-22 18:06:04

它不工作在Firefox：https://jsfiddle.net/exyv8jmw/5/ – yoyoyo

@yoyoyo更新我的答案。在行上，firefox也需要100％的高度https://jsfiddle.net/exyv8jmw/6/ –

第一组。左位置相对，然后设置一个标签位置，以绝对和宽度和高度为100％。

.table{ 
 
    width:500px; 
 
    display:table; 
 
} 
 

 
.tablerow{ 
 
    display:table-row; 
 
} 
 

 

 
.left{ 
 
    width:50%; 
 
    background:green; 
 
    display:table-cell; 
 
    padding:5px; 
 
    
 
    position: relative; 
 
} 
 
.left a { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 

 
.right{ 
 
    width:50%; 
 
    display:table-cell; 
 
    background:red; 
 
    padding:5px; 
 
}

<div class="table"> 
 
<div class="tablerow"> 
 

 
    <div class="left"> 
 
    <a href="/something.html" style="display:block"> 
 
    This is a link</a>  
 
    </div> 
 
    
 
    <div class="right"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </div> 
 
</div> 
 
</div>

来源

2017-02-22 18:42:07

你能不能把格的 'a' 元素中？

<a href="/something.html" > 
     <div class="left"> 
       This is a link </div> 
    </a>

来源

2017-02-22 18:59:42 fabio

应用'left'类的a元素直接，即：

<a href="#" class="left">this is a link</a>

尽管这不会允许额外的内容，它使锚填充可用空间。

问题的一部分是，默认情况下，锚标记是一个“span”类型标记，它只填充与其内容一样大的空间，忽略内部div。

您必须将“锚点”标记动作像“块”样式元素，而不是其周围元素或内部元素。

来源

2017-02-22 19:23:32 tjcertified

您可以将侦听器添加到div ID。

<div class="table" id="clik"> 

    document.getElementById("clik").addEventListener("click", function(){ 
     // document.location = "/something.html"; 
     alert("hello"); 
    });

来源

2017-02-22 19:32:07

如何使整个可点击的表格（表格样式div）

回答

相关问题