刪除多列後的相同單元格寬度

更新：這裏是a follow up question with colspans。刪除多列後的相同單元格寬度

我有一張8列的表。在運行時，任意數量的這些元素都被刪除。

其餘的列將具有相等的寬度。問題在於元素內部的文本有不同的寬度。因爲瀏覽器似乎根據每個單元格內文本的長度來設置單元格寬度。 OK，這個形象可能會更好說它：

enter image description here

這裏是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table{ 
    width:600px; 
} 
table td{ 
    border:1px solid red; 
    text-align:center; 
    background-color:#FFFFCC; 
} 
caption{ 
    color:blue; 
    font-size:80%; 
} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <caption>Original table</caption> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>After some columns are removed</caption> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>4</td> 
     <td>5</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width</caption> 
    <tr> 
     <td>1</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width, too</caption> 
    <tr> 
     <td>1</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
</body> 
</html>

我搜索計算器，發現下面的職位，但他們不是我的答案：

來源

2012-02-02 AlexStack

難道你不能將表格佈局設置爲固定，然後通過將每個寬度設置爲總寬度除以單元格數量來調整單元格大小？ – j08691 2012-02-02 16:26:37

您可以使用table-layout:fixed對table停止瀏覽器根據其內容自動調整表的大小。那麼你將不得不給每個TD設置寬度。沒有設置寬度的任何TD將佔用剩餘寬度。

來源

2012-02-02 16:26:39 472084

「那麼你必須給每個TD設置一個寬度，沒有設置寬度的任何TD將佔用剩餘的寬度。」 - 所以，讓所有的細胞具有相同的寬度，最容易做的事情是設置'表格的佈局：fixed'上'table'再沒有設置寬度爲任何'td's。 – thirtydot 2012-02-02 16:32:34

嗯，這解決了這個問題，但我也有集體。你能看看我的新問題嗎？ http://stackoverflow.com/questions/9126565/colspan-equal-cell-width-after-multiple-columns-are-removed – AlexStack 2012-02-03 09:45:39

如果您使用的百分比合計小於100％，那麼網絡瀏覽器通常會延伸所有內容，就好像它一樣。如果使用百分比加起來超過100％，則單元格可能會超出表格的設置寬度，具體取決於瀏覽器。只要它們都是相同的並且它們等於小於100％，那麼它們將平均分配空間（表格的寬度）。如果您不確定未來有多少列，則僅使用1％的寬度。這給你最多100列的餘地。但是，一些測試是必需的。不確定所有瀏覽器是否都以這種方式行事。

來源

2012-02-02 16:39:49 vaidas

這裏是jQuery的範圍內的解決方案：

$(document).ready(function(){ 
$('table').each(function(){ 
    var tds = $(this).find("tr").eq(0).find("td").size(); 
    var percent = 100/tds; 
    $(this).find('td').css('width',percent+'%'); 
}); 
});

我會建議增加一個類你想這個代碼運行，以避免它與頁面上的其他表搞亂的表。

編輯：這裏有一個小提琴http://jsfiddle.net/rj7UK/

來源

2012-02-02 16:40:13

@vaidas是在正確的軌道上，但使列太小沒有爲我工作。我的解決辦法是讓他們過大，並在px沒有%，像這樣：

table td { width: 500px }

有了Chrome，火狐，IE和邊緣的最新（Aug'2016）版本，它看起來像這個：