HTML表格换行

我有下面两个表:

<table width="100px">
  <tr>
    <td>
      <table width="100%">
        <tr>
          <td>One</td>
          <td>Two</td>
          <td>Three</td>
          <td>Four</td>
          <td>Five</td>
          <td>Six</td>
          <td>Seven</td>
          <td>Eight</td>
          <td>Nine</td>
          <td>Ten</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

当我运行这个我的内部表超过父表的宽度(100px)，因为它有更多的td。如何限制这一点?

所有的值都在同一行，它将离开保留区域(100px)。是否有任何方法可以在多行中显示上述代码的值?

您不能在<table>布局中这样做。即使添加下面的CSS也不能解决这个问题，相反，单元格只是相互渲染。

table {
    table-layout:fixed;
    overflow:hidden;
}

HTML表列元素<col>元素也没有真正的帮助，因为它只适用于第一个<td>。

一种方法是使用非<table>布局，例如:

<table>
<tr>
    <td>
        <div id="container">
            <div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
            <div>Six</div><div>Seven</div><div>Eight</div><div>Nine</div><div>Ten</div>
        </div>
    </td>
</tr>
</table>

CSS

table { width:100px; } #container div { display:inline-block; }
参见演示 <col>如何不工作以及<div>布局如何在100px处换行。

你无法在100px内用正常大小的字体容纳10个这样的单词。

我想你可能想要使用<tr></tr>(行)标签，而不是td(单元格)

或者您真的想将100px行分割为10个单元格并包含这些单词?(我认为这可能是可能的，但你不会看到单词:D，或者如果你使用小字体，并以某种方式使单词旋转90度…)

在这种情况下，HTML表格中的Q/A换行符可能会对你有所帮助。

添加一个class到table并设置这个CSS代码

table.restrict { table-layout:fixed; } table.restrict td { overflow: hidden; }

它将帮助你:

固定表格单元格宽度

使用style attr 'table-layout:fixed' with table

or try this: // div css <style> .frame { overflow-x:scroll; width:100px; } </style> <div class='frame'> <table width='100px'> <tr> <td> <table width='100%'> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> <td>Six</td> <td>Seven</td> <td>Eight</td> <td>Nine</td> <td>Ten</td> </tr> </table> </td> </tr> </table> </div>

相关内容

最新更新

热门标签：