具有单个 25% 列的 HTML 表格使用 100% 宽度，为什么？答案

【问题标题】：HTML table with single 25% column uses 100% width, why?具有单个 25% 列的 HTML 表格使用 100% 宽度，为什么？
【发布时间】：2015-11-13 15:43:04
【问题描述】：

我有一个表格，它使用 4 列动态填充数据。每列定义为使用 25% 的空间。如果表格包含至少一行包含 4 个数据单元格，则可以正常工作。如果动态数据仅填充一个单元格（1 个填充单元格），则该列使用 100% 而不是 25% 的宽度。

如何在不添加空单元格的情况下解决这个问题？这有可能吗？

示例： http://jsfiddle.net/ydm391mz/

<div id="top">
    <table>
        <tr><td>Just 25%</td></tr>
    </table>
</div>

和

#top 
{
    background-color:#eeeeee;
    width:100%;
}
#top table 
{
    width:100%;
}
#top td 
{
    width:25%;
    background-color:#aaaaaa;
}

【问题讨论】：

标签： html css html-table

【解决方案1】：

您的 tr 会自动填充，例如，您可以这样做：

<div id="top">
    <table>
        <tr>
            <td>Just 25%</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

你告诉 HTML 你有 4 个带文本的 td´s（即使只有一个有文本），然后每一列都有 25%。

编辑：

有一个问题，如果他想要超过 4 个<td>，但只有第一个占 25%，该怎么办

第一部分很简单，你只需添加另一个<td>

<div id="top">
    <table>
        <tr><td>Just 25%</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

现在第二部分是 CSS，肯定不止一个解决方案，我的 css 看起来像这样，所以只有第一个 <td> 获得 25% 的宽度：

#top td {
    background-color:#aaaaaa;
}

#top td:nth-child(1) {
    width:25%;
}

【讨论】：

我认为这是在不覆盖display: table-cell; 代理样式表的情况下保留整体表结构的同时实现预期结果的最佳选择。
@ThisClark 如果他需要 5 个怎么办？
@Nvan 然后他插入第 5 个并告诉 css td {width: 20%}
但他可能只想要 25% 的一行
@basZero 我认为这是一个干净的方法。我不知道你是否编辑了这篇文章，但首先我没有读到“我不想使用空单元格”……对此感到抱歉:)但也许你可以下次再使用它:)

【解决方案2】：

您可以使用display:inline-block;。但这不要忘记remove extra space 那里有 4 个tds

#top td {
    width:25%;
    background-color:#aaaaaa;
    display: inline-block;
}

Jsfiddle

【讨论】：

谢谢，这就是解决方案！我更新的示例：jsfiddle.net/ydm391mz/3

【解决方案3】：

你可以试试这个

#top td {
    display:block;
    width:25% ;
    background-color:#aaaaaa;
}

我不会使用它，因为添加更多列时可能会弄乱表格，但它确实有效。

【讨论】：

【解决方案4】：

你只有一列，所以它会自动填满整个宽度。

再添加一列，它将变为 25%。

在这里查看：

table {
  width: 100%;
}
table td {
  background-color: #aaaaaa;
}
#twentyfive {
  width: 25%;
}

<div>
  <table>
    <tr>
      <td id="twentyfive">Just 25%</td>
      <td>Everything else</td>
    </tr>
  </table>
</div>

【讨论】：

这是评论，不是答案。