HTML 表格宽度百分比，表格行平均分隔
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7700534/
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
HTML Table width in percentage, table rows separated equally
提问by user977191
When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I "obliged" to do it?
当我在 html 中创建一个表格时，一个宽度为 100% 的表格，如果我想将所有单元格 (tds) 分成相等的部分，我是否必须为每个单元格输入宽度 %？我“有义务”这样做吗？
E.g.:
例如：
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
OR the following could also be the right procedure, not to write the width in each tds if I want each of them to be devided equally:
或者以下也可能是正确的程序，如果我希望每个 tds 平均分配，不要在每个 tds 中写入宽度：
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I know it works with both manners but I just want to know the "legit" way to do it.
我知道这两种方式都适用，但我只想知道这样做的“合法”方式。
采纳答案by vantrung -cuncon
You need to enter the width % for each cell. But wait, there's a better way to do that, it's called CSS:
您需要为每个单元格输入宽度 %。但是等等，有一个更好的方法来做到这一点，它叫做 CSS：
<style>
.equalDivide tr td { width:25%; }
</style>
<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
回答by Chinoto Vokro
Use the property table-layout:fixed;on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves.
使用table-layout:fixed;表格上的属性来获得等距的单元格。如果一列设置了宽度，那么无论内容是什么，都是指定的宽度。没有设置宽度的列将划分它们之间剩下的任何空间。
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
Just to throw it out there, you could also use <colgroup><col span='#' style='width:#%;'/></colgroup>, which doesn't require repetition of style per table data or giving the table an id to use in a style sheet. I think setting the widths on the first row is enough though.
只是把它扔在那里，你也可以使用<colgroup><col span='#' style='width:#%;'/></colgroup>，这不需要重复每个表数据的样式或给表一个 id 以在样式表中使用。我认为在第一行设置宽度就足够了。
回答by Nick Brunt
Yes, you will need to specify the width for each cell, otherwise they will try to be "intelligent" about it and divide the 100% between whichever cells think they need it most. Cells with more content will take up more width than those with less.
是的，您需要为每个单元格指定宽度，否则他们将尝试对其“智能”并在认为他们最需要它的单元格之间划分 100%。内容较多的单元格会比内容较少的单元格占据更多的宽度。
To make sure you get equal width for each cell you need to make it clear. Either do it as you already have, or use CSS.
为了确保每个单元格的宽度相等，您需要说清楚。要么像你已经拥有的那样做，要么使用 CSS。
table.className td { width: 25%; }
回答by Racooon
you can try this, I would do it with CSS, but i think you want it with tables without CSS.
你可以试试这个，我会用 CSS 来做，但我认为你想要没有 CSS 的表格。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
回答by mlunoe
This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519.
In combination with table-layout: fixedI often find <colgroup>a great tool to make columns act as you want (see codepen here):
这绝对是这个问题最干净的答案：https: //stackoverflow.com/a/14025331/1008519。结合table-layout: fixed我经常找到<colgroup>一个很好的工具来让列按你的意愿行事（请参阅此处的 codepen）：
table {
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
table-layout: fixed;
}
.fixed-width {
width: 100px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.666666667%;
}
.col-10 {
width: 83.333333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.666666667%;
}
.col-7 {
width: 58.333333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.666666667%;
}
.col-4 {
width: 33.333333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.666666667%;
}
.col-1 {
width: 8.3333333333%;
}
/* Stylistic improvements from here */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
table {
width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
padding: 8px;
border: 1px solid gray;
}<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col /> <!-- take up rest of the space -->
<col class="fixed-width" /> <!-- fixed width -->
<col class="col-3" /> <!-- percentage width -->
<col /> <!-- take up rest of the space -->
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<!-- define everything with percentage width -->
<colgroup>
<col class="col-6" />
<col class="col-1" />
<col class="col-4" />
<col class="col-1" />
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>