html - HTML 表格换行 td

Question

我有两个如下表：

<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）。有没有办法用上面的代码在多行中显示值？

Answer 1

你不能用<table>布局做到这一点。即使添加以下 CSS 也无法修复它，而是单元格只是相互渲染。

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

HTML 表格列元素<col>元素也不会真正有帮助，因为它只适用于第一个<td>.

一种方法是改用非<table>布局，例如：

HTML

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

Answer 2

你不能用正常大小的字体在 100px 中容纳 10 个这样的单词。

我认为您可能想<tr></tr>为每个单词使用（行）标签而不是 td(cell)

或者您真的希望将 100px 行拆分为 10 个单元格并包含这些单词？（我认为如果有可能，但你不会看到这些词 :D 或者如果你使用了小字体并且以某种方式使这些词旋转了大约 90 度......）

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

Answer 3

它将帮助您：

固定表格单元格宽度

对表格使用样式 attr 'table-layout:fixed'

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>

Answer 4

向表中添加一个类并设置此 CSS 代码

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