具有100%宽度和相同尺寸列的表。 (变量名称)

时间:2010-05-27 09:39:52

标签: html css

首先,我不太擅长网页设计。

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

有人可以告诉我是否可以使用具有相同大小的列的html表完全拉伸?

任何提示?

5 个答案:

答案 0 :(得分:154)

如果您不知道您将拥有多少列,则声明

table-layout: fixed

以及 设置任何列宽, 意味着浏览器会均匀地划分总宽度 - 无论如何。

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

答案 1 :(得分:49)

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

答案 2 :(得分:8)

你必须做的一切:

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*/

答案 3 :(得分:1)

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS语法

答案 4 :(得分:1)

只需在style="table-layout: fixed ; width: 100%;"标记内添加<table>,并且如果您未指定任何样式,而在style=" width: 100%;"内仅添加<table>,您将能够解决它。