Question

更新：此处为a follow up question with colspans。

我有一个包含8列的表格。在运行时，删除任意数量的这些元素。

其余列的宽度相等。问题是当元素内的文本具有不同的宽度时。因为浏览器似乎根据每个单元格内的文本长度设置单元格宽度。好的，这张图片可能说的更好：

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>

我搜索了stackoverflow并找到了以下帖子，但它们不是我的答案：

Answer 1

您可以使用table-layout:fixed上的table来停止浏览器根据内容自动调整表格大小。然后你必须给每个TD一个设定的宽度。任何没有设定宽度的TD都会占用剩余的宽度。

Answer 2

如果您使用的累计百分比低于100％，那么网络浏览器通常会将所有内容拉伸，就像它一样。如果使用的累计百分比超过100％，则单元格可能会超出表格的设置宽度，具体取决于浏览器。只要它们都相同并且它们等于100％，那么它们将平均分配空间（表的宽度）。如果您不确定将来会有多少列，只需使用1％作为宽度。这为您提供了多达100列的余地。但是，需要进行一些测试。不确定所有浏览器是否都采用这种方式。

Answer 3

这是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/

Answer 4

@vaidas走在正确的轨道上，但是让列太小也不适合我。我的解决方案是将它们设为 large ，而在px而不是%，就像这样：

table td { width: 500px }

使用最新（2016年8月）的Chrome，Firefox，IE和Edge版本，它看起来像这样：

删除多列后的单元格宽度

4 个答案: