Question

当我在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>

或者以下也可能是正确的程序，如果我希望每个tds中的每一个都被平分，则不要在每个tds中写入宽度：

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

我知道它适用于这两种方式，但我只是想知道“合法”的方式。

Answer 1

使用表格上的属性table-layout:fixed;来获得等间距的单元格。如果列设置了宽度，则无论内容是什么，它都将是指定的宽度。没有宽度设置的列将划分剩余的空间。

<table style='table-layout:fixed;'>
    <tbody>
        <tr>
            <td>gobble de gook</td>
            <td>mibs</td>
        </tr>
    </tbody>
</table>

只是把它扔出去，你也可以使用<colgroup><col span='#' style='width:#%;'/></colgroup>，它不需要重复每个表数据的样式或给表格在样式表中使用。我认为在第一行设置宽度就足够了。

Answer 2

您需要为每个单元格输入宽度％。但是等等，有更好的方法，它叫做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>

Answer 3

是的，您需要指定每个单元格的宽度，否则他们将尝试对其进行“智能化”，并将它们划分为认为最需要它们的单元格之间的100％。具有更多内容的单元格将比具有更少内容的单元格占用更多宽度。

要确保每个单元格的宽度相等，您需要明确它。要么像现在这样做，要么使用CSS。

table.className td { width: 25%; }

Answer 4

你可以尝试这个，我会用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%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
         </tr>
      </table> 
   </body>
</html>

Answer 5

对于这个问题，这绝对是最干净的答案：https://stackoverflow.com/a/14025331/1008519。与gson结合使用时，我经常会发现table-layout: fixed是一个很好的工具，可以根据需要制作列（请参阅codepen here）：

<colgroup>

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

HTML表格宽度百分比，表格行平均分开

5 个答案: