宽度为100％的表格，列大小相同

77

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

有人可以告诉我是否有可能有一个具有相等大小的列的html表被完全拉伸吗？

html css

— 安德烈·乔巴努（Andrei Ciobanu）
source

5

底部的答案（得票最多）应标记为已接受答案，因为它更正确且可以普遍解决问题。

— Micros

1

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

— Fredy31 '18

57

<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”是列数

— 萨利尔
source

4

+1为第二种方法。但是400英尺呢？英寸？厘米？像素？使用单位。:)

— ANeves认为SE是邪恶的2010年

2

这就是重点。第一个示例与所使用的单位无关。

— 卡洛斯·梅洛

2

这是否考虑到tr和tds的边界？我想不是。

— Ninad

我错了..我只是尝试了..它奏效了..我有32列的td边框。

— Ninad

4

重复stackoverflow.com/questions/5055299/…，其中放置了一个有趣的答案。

— 阿尔贝托

196

如果您不知道将要有多少列，请声明

table-layout: fixed

再加上未设置任何列宽，则意味着浏览器会平均分配总宽度-无论如何。

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

— Orszaczky
source

我想将这种方法用于全屏表格而不会溢出。它会创建多少列？您能否设置一个演示以更好地理解它？

— ProgramCpp

3

jsfiddle.net/5babcvg4创建一个具有所需列数的表，然后将声明添加到表中。

— orszaczky 2015年

16

请注意，必须设置表格宽度（例如width: 100%;）。

— Skippy le Grand Gourou 2015年

1

完美的解决方案。

— 瑟吉（Sergi）

7

您要做的一切：

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;}

— 阿罗伊科斯
source

2

这对我不起作用。你能提供一个可行的例子吗？

— 2013年

现在有效-我以前尝试过这种td { width: 100% }方法，虽然没有用，但2000px效果很好。

— 2013年

即使HTML / CSS的工作方式令人发指，这也是最好的答案。

— Charles Goodwin 2014年

如果您有very_long_words，或者您的行包含，则此方法将无效<pre>Some long text</pre>。从这里的所有答案来看，只有orszaczkytable-layout: fixed为我工作。

— Conchylicultor

1

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

— Sineth Lakshitha
source

0

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS语法

— 埃斯蒂夫斯
source