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

请参阅demo <col>无效的方式以及<div>布局如何包裹100px。

Answer 2

U不能在100px中使用正常大小的字体来填充10个单词。

我认为您可能希望为每个单词使用<tr></tr>（行）标记而不是td（单元格）

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

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

Answer 3

它会帮助你：

Fixed Table Cell Width

使用样式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>

Answer 4

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

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

HTML表格换行td

4 个答案: