HTML 表格换行 td答案

【问题标题】：HTML table wrap tdHTML 表格换行 td
【发布时间】：2013-05-17 02:58:09
【问题描述】：

我有两个如下表：

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

当我运行这个时，我的内部表超过了父表的宽度（100 像素），因为它有更多的 TD。这怎么能限制？

所有值都在同一行中，并且超出了保留区域（100px）。有没有办法用上面的代码在多行中显示值？

【问题讨论】：

每个是一行。由于文本长度，它超出了其父级宽度。只有个人 one two 等
是的，如果我们愿意，这个问题就会得到解决。但我只想处理上面的代码。我正在寻找 CSS 或任何其他解决方案

标签： html html-table

【解决方案1】：

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

我想你可能想为每个单词使用<tr></tr>(row) 标签而不是 td(cell)

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

这个 Q/A Word-wrap in an HTML table 在这种情况下可能会对你有所帮助。

【讨论】：

嘿，这是用于单个 td 中的自动换行。但我只想包装整个 TD 本身。
我仍然不确定你想要什么。你能画出你的输出应该是什么样子吗？ :D 我有点困惑。编辑：如果您希望 TD 像新行一样在他们自己之下，我认为这是不可能的。你有一个表 - 行和列。 U 一排有 10 个单元格。我不认为你可以将这些单元格移动到一行中，因为这会使它们成为一行？！为什么你想要这样做并且不能只制作而不是 s？

【解决方案2】：

它会帮助你：

Fixed Table Cell Width

在表格中使用样式 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>

【讨论】：

即使表格宽度固定，它也会超过父表格宽度。就像我给每个 td 总宽度 20px 变成 200px 一样。在这种情况下，它也失败了:(
@jestges：好的，那么只有一种方法可以尝试......检查更新的答案

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

请参阅demo，了解<col> 的工作原理以及<div> 布局如何在100px 处换行。

【讨论】：