html表格td问题答案

【问题标题】：Html table td problemhtml表格td问题
【发布时间】：2011-10-07 17:10:56
【问题描述】：

您好，我正在尝试创建一个包含两个 4 行的表，每行有 2 个 tds。我为我的 td 指定了不同的宽度，但每个 td 都采用相同的宽度，为什么？下面是我的代码

<table style="width:400px;">
    <tr>
        <td style="background-color:Red; width:50px;"></td>
        <td style="background-color:Red;width:70px;"></td>
    </tr>
    <tr>
        <td style="background-color:Red; width:54px;"></td>
        <td style="background-color:Red; width:80px;"></td>
    </tr>
    <tr>
        <td style="background-color:Red; width:20px;"></td>
        <td style="background-color:Red; width:40px;"></td>
    </tr>
</table>![enter image description here][1]

【问题讨论】：

您好，图片已上传。我想用 3 种颜色分割每个条。
你想要这样的东西：stackoverflow.com/questions/5293049/…
嗨 thirydot 是的，几乎相同，但我想将每个条分成 3 个部分，每个部分包含不同的颜色，条宽应取自 asp.net 中的代码隐藏。
自己动手做吧。您应该能够将我的演示拆开并弄清楚它是如何工作的。

标签： html

【解决方案1】：

HTML 列中的所有单元格必须具有相同的宽度。

您可能不应该使用<table>。

【讨论】：

我不认为您的意思是“HTML 表格中的所有列必须具有相同的宽度。”
确实如此。表格是按行和列分组的数据集合，它不是条形图。
谢谢。云，你建议我应该选择什么。我需要根据数字（宽度）创建条形。
那么你想要一组<div>s，而不是<table>。

【解决方案2】：

td 占用第一行的宽度。并且所有行加起来都不超过 400 像素。它正在按照您输入的规格尽力而为。

【讨论】：

【解决方案3】：

因为一列只有一个宽度：对于给定的列，所有行共享相同的宽度。

【讨论】：

【解决方案4】：

当您为<td> 指定宽度时，它会变成列的宽度，并且列中的所有<td>s 都将采用相同的宽度。

如果您的数据实际上是一个表格（例如列表），您可以使用rowspan 为不同的表格实现不同的宽度。 rowspan 实际上合并了两列，所以你可以有一些 <td>s 比另一个大。

如果您的数据不是实际表格（例如反馈表），并且您尝试使用表格仅用于对齐，您 should not be doing so。有更好的方法。

【讨论】：