html table 中的td宽度为啥不起作用

Posted 2023-03-19

我的代码如下：
<div style="width:500px; height: 200px; overflow:hidden;">
<table cellpadding="0" cellspacing="0" style="position:absolute">
<tr>
<td style="width:200px; height:100px; background-color:#FFFF00;">aaa </td>
<td style="width:200px; background-color:#FF00FF;">1</td>
<td style="width:200px; background-color:#00FFFF;">2</td>
<td style="width:200px; background-color:#0000FF;">3 </td>
<td style="width:200px; background-color:#FF0000;">4</td>
<td style="width:200px; background-color:#FFFF00;">5</td>
</tr>
</table>
</div>

在这段代码中，table的宽度将会自动变成500，即外层div的宽度。
在页面打开后table中的所有td的width将会被忽略,td的宽度将会自动重设。
现在我想解决的问题是，在不给table添加width属性的情况下，table的宽度自动根据内部的td生成。 换个说法就是，在不给table添加width属性的情况下，td的width属性仍然起作用。

请高手指点。

参考技术A 如果你不通过样式表。你试试这种方式。
<td width="200" >xxxx</td>本回答被提问者采纳

为啥 TD 宽度不起作用或未遵循？

【中文标题】为啥 TD 宽度不起作用或未遵循？

【英文标题】：Why TD width is not working or not followed?为什么 TD 宽度不起作用或未遵循？

【发布时间】：2013-01-23 22:00:49

【问题描述】：

原问题：HTML <table> 有默认宽度吗？

最近有人问了一个类似这些问题的问题，让我感到疑惑。

以此为例。

http://jsfiddle.net/rqmNY/1/

在这个小提琴中，如果您要检查它的宽度（我正在使用 chrome 中的检查元素），它会显示 100px，按预期工作。

让我们再添加几个“td”，我们将看到“td:100px”css 被忽略了。

http://jsfiddle.net/rqmNY/2/

如您所见，现在它是 83 像素，而不是最初预期的 100px。

但是假设我退回到更少的 TD (7)，并为每个 TD 元素添加更宽的宽度 (500px)，结果是 td 的宽度卡在119px。

http://jsfiddle.net/rqmNY/6/

最后，假设我有一个宽度为 2000 像素的表格，宽度为 100px 的 td，以及许多 td 元素。 http://jsfiddle.net/rqmNY/7/

现在表格宽度会覆盖 TD 宽度，并将 td 的宽度扩展为222px。

谁能解释这种行为？

附言请注意，在所有情况下，检查元素工具都会告诉我宽度始终对应于 css，只是最终结果显示不正确。

【问题讨论】：

你可以试试。我尝试将表格的宽度设置为某个像素，但情况类似

【参考方案1】：

根据 w3 Docs Here 它说“在没有任何宽度规范的情况下，表格宽度由用户代理确定。”

我能想到的是 td 宽度始终取决于表格宽度。如果您指定或不指定。如果您有一个宽度为 500px 的表格和 2 个宽度为 200px 的 TD。现在，在表中添加这 2 个 TD 之后，还有 100px 剩余以容纳，因此 50px 每个都被添加到覆盖原始宽度属性的两个 TD 中。看这个链接http://jsfiddle.net/rqmNY/7/

【讨论】：

嗯。如果有人没有定义表格宽度怎么办？

如果表格没有宽度属性。然后 TD 将采用为 TD 定义的任何内容（因为现在它们没有任何要考虑的表格宽度）并且表格宽度将是所有 TD 宽度的组合。希望这清楚，检查这里jsfiddle.net/rqmNY/10

jsfiddle.net/rqmNY/11 这是来自您的小提琴的更新。可以看到因为我在表格中多加了2个TD，所以每个TD的宽度都小于200px

这对我来说是新的。不知道这种情况。感谢@He Hui 提供此更新。那么我想这取决于父元素的宽度。就像在您的示例中，当您添加 4 个 TD 时，可用宽度小于 800 像素，因此 TD 的宽度根据可用宽度进行了调整，并且 200 像素属性被忽略。在同一个示例中，如果我们拖动 HTML 输出部分并将宽度增加到 800 或更大，那么 TD 的 200px 宽度属性就会起作用。您对此有何看法？

其实我相信我知道答案。我将其添加为答案

【参考方案2】：

如果不指定表格宽度，实际上表格宽度取决于单元格宽度。但是当您指定表格宽度时，它将忽略 td 宽度。看下面的例子：

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

如果你使用

td  
  width:500px;

那么表格宽度将为1000px。

但是如果你使用

table 
  width:500px;
 
td  
  width:500px;

它将忽略<td> 宽度，表格宽度将为500px。

【讨论】：

那真的不是真的。使用不同的视口、表格宽度和 td 宽度再次测试您所说的内容。然后检查我的答案。

检查上面的代码到你的本地服务器。我想你不明白我的回答。有时jsfiddle.net 无法显示实际输出。

我不是说你错了。我只是说你只是部分正确。在你的本地服务器上测试这个，一个有 20 个 td 的表。未定义表格宽度。每个 td 是 200px 宽。请检查我的答案。

看看你的 HTML ......你有两个 trs 和一个 td 。这不是两列，而是两行，每行一个单元格。

【参考方案3】：

您是否尝试将display:inline-block 添加到您的TD CSS？这会迫使浏览器不忽略您的 TD 宽度。

【讨论】：

我不是在寻找解决 TD 宽度的解决方案，因为有很多解决方案。我的问题是关于表的行为，以及它是如何工作的。

在构建电子邮件通讯时，很多时候您需要使用表格。一些电子邮件客户端不支持“显示”css 属性。请参阅campaignmonitor.com/css 了解与最流行的电子邮件客户端的所有 CSS 兼容性。

inline-block 可能会修复您的用例，但也会更改 table 的默认行为，例如，如果使用了 vertical-align: middle，则在这种情况下将不起作用

【参考方案4】：

我非常相信这个问题的答案是这样的：

会影响TD的宽度优先级是

表格宽度

父元素宽度（如果没有，视口）

元素（TD）宽度。

因此，如果设置了表格宽度，TD 将始终调整为表格的宽度。但是，如果未设置宽度，“主”宽度将是视口的真实宽度。除非 CSS 代码另有说明，否则这是正确的。只有当 TD 的总宽度小于视口的总宽度时，才会考虑元素宽度。

编辑

表格宽度将始终覆盖 TD 宽度。

仅会遵循规定的 TD 宽度，直到超过视口宽度，视口宽度将被优先考虑。

【讨论】：

很好的答案，但要补充一件事：td 上的min-width 优先于表格宽度

@何辉 -> 你真是个天才先生！大声笑...这让我发疯了，不明白为什么...我删除了 100% 的表格宽度，我的 td 的 % 工作...非常感谢。

伟大的观察者，谢谢你的回答:)