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

Question

当我在html中创建一个表,宽度为100%的表时,如果我希望所有单元格(tds)被分成相等的部分,我是否必须输入每个单元格的宽度%？我"有义务"这样做吗？

例如:

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