删除多列后的相同单元格宽度

更新：这里是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）版本，它看起来像这个：