Question

我正在尝试使用HTML和SASS制作一些自定义表格。我在这个网站上搜索了很多问题，但没有一个适合我的情况。

表的属性是：

表格“宽度：100％”
响应列宽度（根据内容）
- 前两列的内容和响应
- 第三列（最后一列）的宽度：100％-（第一列+第二列）的宽度
  - 第三列带有“代码”，此代码显示在一行中（可以在其他区块中换行）
  - 如果“代码”过长，则会显示水平滚动条。（滚动条仅影响“代码”。“ td”处没有滚动条，而“代码”处有滚动条。）

我已经完成了：

table-layout: fixed

：部分起作用。但是，无论单元格中的内容是什么，列宽在表中均分。我需要一个响应列。（如果您在下面的演示中激活了SASS的第10行，则可以看到我说的话。）

overflow-x: scroll, auto, ...

：我成功在代码块中制作了滚动条。但是表格的宽度超过了“宽度：100％”。换句话说，（具有代码块）的宽度无限扩展。（在下面的演示中对此进行了演示。）

这是我的演示：http://jsfiddle.net/purhvf0b/23/

Answer 1

将下面的无聊添加到td

 td
    border: 1px solid #444444
    width: 1px

还将下面的无礼添加到第三列（我在第三td中添加了一个类longtd）

.longtd
  overflow: auto
  max-width: 0;
  width: auto;

分叉的小提琴http://jsfiddle.net/Soothran/n57m0f1b/

http://jsfiddle.net/lalji1051/ty4gof03/

Answer 2

尝试

css

.width-100-border {
    width: 100%;
    border: 1px solid #00FF00;
    overflow-x: auto;
}
table td{
   border: 1px solid #444444;
   max-width: 600px;
}

Answer 3

您可以使用m-custom-scrollbar jquery插件 http://manos.malihu.gr/jquery-custom-content-scroller/

如何使<td>中的仅水平滚动条代码块？

3 个答案: