HTML + CSS : table with scrollbar if we have a long text

标签 html css html-table scrollbar

<分区>

我有一个这样的表:

<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

最佳答案

下面为我创建了一个滚动条。它可以做得更漂亮,但滚动有效。此外,请记住将任何样式提取到适当的 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/

关于HTML + CSS : table with scrollbar if we have a long text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27812154/

相关文章:

javascript - 动态插入数据时,highcharts 会更改系列颜色

javascript - 使用 html 中的 PHP 将 HTTP post 数据从 Android 应用程序发送到服务器

HTML/CSS 内容缩放

javascript - 使用多维数组 javascript 中的数据填充表的列

javascript - 通过jquery更改html视频播放器的css

WorldPay 自定义 CSS 文件支持的 CSS 属性

html - 将 CSS 链接到 HTML 文件 : Path specification

python - 使用 BeautifulSoup Python 拉取相邻的表格单元格

javascript - 在表中动态插入新行

jquery - 如何在 jQuery 中将表格向下滑动到一行?