如何制作一张反应迟钝的桌子?

时间:2014-06-18 08:48:38

标签: twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap 3,我想知道如何制作一个无响应的表格,因为它需要大约40个列在屏幕上。

我的客户不介意他们是否必须水平滚动才能查看表格,只要所有数据都在那里。

那么如何制作一个无响应的表格,我手动设置列宽是什么?

5 个答案:

答案 0 :(得分:8)

您可以在第th列上设置最小宽度。这是一个例子:

http://jsbin.com/xuzuwuko/3/edit

答案 1 :(得分:2)

更改" container-fluid"

的容器类

示例:

<div class="container-fluid">
<table class="table">
...
</table>
</div>

这项工作必须在html5中设置doctype:

<!DOCTYPE html>

并向此标题添加标题:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

See documentation

答案 2 :(得分:1)

您可以通过多种方式执行此操作:

1)将样式表中的min-width设置为tablethtdtr

table {
    min-width:700px;
}
tr {
    min-width:120px;
}
th,td {
    min-width:20px;
}

2)或者,您可以删除标头响应式元视图:

<meta name="viewport" content="width=device-width, initial-scale=1">

答案 3 :(得分:0)

不是将 min-width 添加到所有th元素,而是使用style / css全局包含。

th {
 min-height: 100px;
}

答案 4 :(得分:-8)

我找到了解决方案。

我在所有标题min-width元素中添加了th

<th style='min-width: 100px;'>

这似乎有效。