HTML + CSS：如果我们有长文本，则带有滚动条的表格[重复]答案

【问题标题】：HTML + CSS: table with scrollbar if we have a long text [duplicate]HTML + CSS：如果我们有长文本，则带有滚动条的表格[重复]
【发布时间】：2015-03-04 21:59:53
【问题描述】：

我有一张这样的桌子：

<table class="tg">
  <tr>
    <th>XXXXXXXXXXXX</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

如果文本太长 (XXXXXXXX)，我会尝试放置滚动条。我该怎么做？

Fiddle

【问题讨论】：

这个问题已经被问过了。 stackoverflow.com/questions/8232713/…

标签： html css html-table scrollbar

【解决方案1】：

以下为我创建了一个滚动条。它可以做得更漂亮，但滚动有效。另外，请记住将任何样式提取到适当的 CSS 文件中。

<table class="tg">
  <tr>
    <th style="width: 100px; display: block; overflow-x: scroll;">XXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxXXX</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

jsFiddle：http://jsfiddle.net/fn6bsduk/

【讨论】：

【解决方案2】：

您需要将 css 中 <th> 和 <td> 项目上的 max-width: 设置为您希望滚动条显示的任何像素宽度。看看我是如何在这里修改你原来的 jsfiddle http://jsfiddle.net/59nm1xea/2/

【讨论】：

【解决方案3】：

您需要在要启用滚动的单元格上设置宽度或最大宽度。

.tg th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:20px 20px;
    border-style:solid;
    border-width:1px;
    overflow:auto;
    max-width:50px;
}

通过向您添加 max-width:50px .tg th 选择器，它将分配溢出：滚动（源自自动）当它变得超过 50px 时。

在这里看到：http://jsfiddle.net/1t4r7rfj/

【讨论】：