如何使整個可點擊的表格（表格樣式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）

回答

相關問題