删除多列后单元格宽度相等答案

【问题标题】：Equal cell width after multiple columns are removed删除多列后单元格宽度相等
【发布时间】：2012-02-02 16:22:52
【问题描述】：

更新：这里是a follow up question with colspans。

我有一个有 8 列的表。在运行时，任意数量的这些元素都会被移除。

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

这里是代码：

<!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并找到了以下帖子，但它们不是我的答案：

【问题讨论】：

您不能将表格布局设置为固定，然后通过将每个宽度设置为总宽度除以单元格数来调整单元格大小吗？

标签： html css

【解决方案1】：

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

【讨论】：

"那么你必须给每个 TD 设置一个宽度。任何没有设置宽度的 TD 将占用剩余的宽度。" - 所以，要使所有单元格的宽度相等，最简单的方法是在table 上设置table-layout: fixed，然后不为任何tds 设置宽度。
好吧，这解决了问题，但我也有 colspans。你能看看我的新问题吗？ stackoverflow.com/questions/9126565/…

【解决方案2】：

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

@vaidas 是在正确的轨道上，但是让列太小对我不起作用。我的解决方案是让它们太大，在px而不是%，像这样：

table td { width: 500px }

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

【讨论】：