HTMLTable：空鏈接元素應該佔用整個單元格空間

我正在使用（bootstrap）表格，其中我將一個鏈接放在其中一個單元格中，可能發生的情況下，實際鏈接文本爲空，因此不顯示鏈接元素（或者更好地說用戶不能點擊它）。現在的目標是，鏈接元素應占據整個單元格空間，而不管鏈接中是否有文本。HTMLTable：空鏈接元素應該佔用整個單元格空間

<table class="table table-bordered table-striped"> 
    <tr> 
    <td><a ...>Text that might be empty</a></td> 
    ...

我已經嘗試了一個標籤的顯示屬性設置爲直列表這工作了，除了IE瀏覽器的大多數瀏覽器。有沒有一個很好的，乾淨的和crossbrowser兼容的方式來實現這一目標？

來源

2016-09-21 0xDECAFBAD

您是否嘗試過使用類似？ – salih0vicX

'整個單元格空間'，那個空間是什麼，你爲單元格定義了最小空間嗎？ –

不會使整個可用單元格空間上的a元素跨度 – 0xDECAFBAD

給錨一個display: block。然後它將取其父母的全部寬度。

我給你做了這個演示。通過點擊按鈕，你會看到它是如何工作的。

請注意，錨點應該至少有'東西'在裏面。

$('button').click(function() { 
 
    $('a').toggleClass('block'); 
 
});

td { 
 
    border: 1px solid red; 
 
} 
 
tr, td { 
 
    height: 100%; 
 
} 
 
a { 
 
    background: blue; 
 
} 
 
a.block { 
 
    display: block; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><a href="#">&nbsp;</a></td> 
 
    <td>Text<br />text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text text</td> 
 
    <td>Text text</td> 
 
    </tr> 
 
</table> 
 

 
<button>Toggle block</button>

來源

2016-09-21 08:27:58 LinkinTED

因此，我必須在其中放置類似的東西，否則它不會在沒有內容的情況下工作？ – 0xDECAFBAD

是的，裏面需要有東西。對於你來說，無論如何你都希望有一個解釋性文本（想想盲目的訪問者） – LinkinTED

有意義的說法和行爲 - 解決方案在某種程度上適用於我，但並不填滿整個高度，如果其他單元格跨越多個文本行的表格行 – 0xDECAFBAD

設置min-width爲列

<td style="min-width:50px"><a ...>Text that might be empty</a></td>

來源

2016-09-21 08:23:43

這將有/無工作文本。

.hasLink{ 
    position: relative; 
    height: 38px; 
} 
.hasLink a{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    font-size: 0px; //if you don't want to show any text 
    padding: 8px 0 0 5px; 
} 

<tr> 
    <td class="hasLink"><a href="#"></a></td> 
    <td></td> 
</tr>

來源

2016-09-21 08:39:03

font-size 0px如果內容中有東西，甚至不會顯示文本。 – 0xDECAFBAD

沒有得到你的問題。答案已更新。 –

HTMLTable：空鏈接元素應該佔用整個單元格空間

回答

相關問題