Html 具有 100% 宽度且具有相同大小列的表格。(变量名)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2919980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:13:18  来源:igfitidea点击:

Table with 100% width with equal size columns. (a variable name)

htmlcss

提问by Andrei Ciobanu

first of all I am not quite good at web design.

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

I have to dynamically create a table with a variable number of columns, determined at runtime.

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

Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched ?

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

Any hints ?

任何提示?

采纳答案by Salil

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

For variable number of columns use %

对于可变数量的列使用 %

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

where 'x' is number of columns

其中“x”是列数

回答by orszaczky

If you don't know how many columns you are going to have, the declaration

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

table-layout: fixed

table-layout: fixed

along with notsetting any column widths, would imply that browsers divide the total width evenly - no matter what.

除了设置任何列宽外,还意味着浏览器会平均划分总宽度 - 无论如何。

That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.

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

回答by aroykos

ALL YOU HAVE TO DO:

所有你需要做的:

HTML:

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:

CSS:

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

if you have thyou need to set it too like this:

如果你有th你需要设置它太像这样:

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

回答by S. Esteves

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS syntax

SCSS 语法