具有 100% 宽度和相同大小列的表格答案

【问题标题】：Table with 100% width with equal size columns具有 100% 宽度和相同大小列的表格
【发布时间】：2020-07-16 13:47:38
【问题描述】：

我必须动态创建一个列数可变的表，在运行时确定。

谁能告诉我是否有可能有一个完全拉伸的具有相同大小列的 html 表格？

【问题讨论】：

并且不依赖于您拥有像第一个答案那样的确切内容。

标签： html css

【解决方案1】：

如果你不知道你将有多少列，声明

table-layout: fixed

连同不设置任何列宽，意味着浏览器平均分配总宽度 - 无论如何。

这也可能是这种方法的问题，如果你使用这种方法，你还应该考虑如何处理溢出。

【讨论】：

我想将这种方法用于无溢出的全屏表格。它会创建多少列？你能设置一个演示来更好地理解它吗？
jsfiddle.net/5babcvg4 创建一个包含任意多列的表，然后将声明添加到表中。
注意必须设置表格宽度（例如width: 100%;）。

【解决方案2】：

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

对于可变数量的列，使用 %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

其中“x”是列数

【讨论】：

+1 表示第二种方法。但是 400 什么，英尺？英寸？厘米？像素？使用单位。 :)
这正是重点。第一个示例与使用的单位无关。
这是否考虑到了tr和tds的边界？我想不会。
我错了..我刚试过..它有效..我有 32 列的 td 边框。
stackoverflow.com/questions/5055299/… 的副本，其中放置了一个有趣的答案。

【解决方案3】：

所有你必须做的：

HTML：

<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>

CSS：

#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/

如果你有th，你也需要像这样设置它：

#my-table th{width:2000px;}

【讨论】：

这对我不起作用。你能提供一个可行的例子吗？
现在有效 - 我之前尝试过 td { width: 100% } 方法，但没有成功，但 2000px 效果很好。
这是最好的答案，即使 HTML/CSS 的工作方式令人发指。
如果你有very_long_words，或者你的行包含<pre>Some long text</pre>，这将不起作用。从这里的所有答案中，只有 orszaczky 的 table-layout: fixed 对我有用。

【解决方案4】：

只需在<table>标签内添加style="table-layout: fixed ; width: 100%;"，如果您未指定任何样式，只需在<table>内添加style=" width: 100%;"即可解决。

【讨论】：

【解决方案5】：

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS 语法

【讨论】：