Html 使用 Bootstrap 3 具有固定高度和标题和列宽的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21017769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table with fixed height and header and colum width with Bootstrap 3
提问by raben
I would like to have a table with the following features:
我想要一张具有以下功能的表：
- fixed header,
- fixed height (with visible scrollbars)
- 3 fixed width column (one large column and two narrow column).
- 固定标题，
- 固定高度（带有可见滚动条）
- 3 个固定宽度的列（一个大列和两个窄列）。
I started using:
我开始使用：
tbody { display:block; overflow:auto; height:100px; }
To get at least the fixed height but this rule squeezes the table on the left (I will provide a screenshot if necessary).
为了至少获得固定高度，但此规则会挤压左侧的桌子（如有必要，我将提供屏幕截图）。
The table is contained in a Bootstrap 3 column.
该表包含在 Bootstrap 3 列中。
Here is an example http://jsfiddle.net/PGEdK/
这是一个例子http://jsfiddle.net/PGedK/
Any ideas? Thanks in advance.
有任何想法吗？提前致谢。
回答by Dhiraj
Here's the JS FIDDLE DEMOwhich is working just like you have expected of. Acutally, there's no problem with your tbody style. You just need to add few more styles for your thand td. So, your final code will be something like this:
这是JS FIDDLE DEMO，它按您的预期工作。实际上，您的 tbody 风格没有问题。您只需要为th和td添加更多样式。所以，你的最终代码将是这样的：
tr {display: block; }
th, td { width: 300px; }
tbody { display: block; height: 100px; overflow: auto;}
If you look at the fiddle, you will notice that I have wrapped thwith trso that I can give proper width to th after giving display:block style to tr. So, if you want to target that tr which wraps th only, you can do that as well.
如果您查看小提琴，您会注意到我已经用tr包裹了th，以便在将 display:block 样式赋予tr后，我可以为 th 赋予适当的宽度。所以，如果你想定位只包装 th 的 tr，你也可以这样做。
For demo purpose, I have wrapped the table with .tablecontainer class so that we have certain width to work with.
出于演示目的，我用 .tablecontainer 类包装了表格，以便我们有一定的宽度可以使用。
回答by rash.tay
Try max-height and max-width.. It sets the maximum height and width
尝试 max-height 和 max-width .. 它设置最大高度和宽度
