Question

我有一张这样的表：

<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

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

Answer 2

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

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

通过向你.tg选择器添加max-width：50px，当它变得超过50px时，它将分配overflow：scroll（从auto派生）。

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

HTML + CSS：如果我们有一个长文本，则使用滚动条的表格

3 个答案: