我該如何製作html表格列（僅限文字）均勻分佈

我想知道是否有一種簡單的方法可以通過HTML/CSS來實現。我該如何製作html表格列（僅限文字）均勻分佈

我有一個動態的固定寬度的表4列：

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

我要的是總有所有列數據都相同的寬度。

因此，如果任何列是完全空的，我希望它崩潰，其餘的列都將具有相同的寬度。

我知道我的jsFiddle是不正確的，但我想有一個作爲起點。

我做過評論How to get table cells evenly spaced?，但並不完全是我在找的東西。我也審查了Evenly spaced fixed-width columns - in a responsive setting，但那一個也不一樣。

編輯：

td:empty {display: none}是不是解決辦法，因爲如果另一行已經有列的文本，表格被扭曲。 jsFiddle

來源

2014-02-13 malkassem

我想你需要javascript： – RobinvdA

4列表示td {width：25％;} with table {table-layout：fixed;/* width：optionnal * /} –

UPDATE

在多行的情況下：

解決方案是在下面說明，有它的工作，你需要<tr>顯示爲一個表：http://jsfiddle.net/zTbGB/7/http://jsfiddle.net/zTbGB/8/

tr { 
    display:table; 
    table-layout: fixed; 
    width:100%; 
}

=============================================== ==

你可以設置：表元素上的table-layout:fixed。 http://jsfiddle.net/zTbGB/1/

參見：http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

然後你可以使用：空選擇：

td:empty {display:none;}

http://jsfiddle.net/zTbGB/3/

來源

2014-02-13 15:26:33

我更新了問題。這不正確。謝謝 – malkassem

我更新了我的答案，tr作爲表格修正了它。 –

對我來說，聲明「table-layout：fixed; width：100％;」對於表本身，解決了這個問題（但我沒有空列）。謝謝 –

你可以試試this Fiddle。似乎運作良好。在下面的CSS中，我使用:: empty僞選擇器。該選擇器在IE8或更低版本中無法使用，所以如果您支持IE8，那麼您需要用一些javascript來增加此代碼以隱藏那些空的<td>'s。

CSS

table 
{ 
    width: 400px; 
    table-layout: fixed; 
} 
td:empty { display: none; }

來源

2014-02-13 15:27:44 dward

我更新了這個問題。這不正確。 – malkassem

我建議你[檢查這個線程]（http://stackoverflow.com/questions/16764404/calculate-and-set-colspan-value-dynamically）。隨着一些調整，它應該能夠幫助你。在CSS中無法動態地爲您的HTML分配「colspan」值。 – dward

你有一個解決辦法，將桌子分成許多顯示爲的桌子：http://jsfiddle.net/zTbGB/8/ –

我已經嘗試了代碼，你使用jQuery :)對，你使用jQuery可以使用下面的代碼：

$("#parent td").each(function() { 


    if ($(this).text() == ''){ 
     var val=$(this).val(); 
     //alert(len); 
    $(this).remove(); 


    } 

}); 
var len=$("#parent td").length; 
     var wit=100/len; 
    //wit=wit+"%"; 
$("table td").width(wit + "%");

這裏更新http://jsfiddle.net/zTbGB/6/

來源

2014-02-13 15:47:28

我該如何製作html表格列（僅限文字）均勻分佈

回答

相關問題