Html CSS - tr 上的固定高度和桌子上的固定高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34993813/
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
CSS - fixed height on tr and fixed height on table?
提问by Andrius
I need to have table that has rows with fixed height and that table itself must be of fixed height. For example all rows would be of 8px height and table would be of height 400px. If there would be less rows than total height of table, then remaining part of the table should be like a gap.
我需要有具有固定高度的行的表格，并且该表格本身必须具有固定的高度。例如，所有行的高度为 8px，表格的高度为 400px。如果行数少于表格的总高度，则表格的剩余部分应该像一个间隙。
But css automatically readjusts row height if I set fixed height on table.
但是如果我在桌子上设置了固定高度，css 会自动重新调整行高。
I need table to look like this:
我需要表看起来像这样：
|row |cont |
|row |cont |
|row |cont |
| |
| |
| |
|End of table|
I tried this:
我试过这个：
CSS:
CSS：
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
HTML:
HTML：
<table class="t-table">
<tr style="line-height: 8px">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Or you can check it here: https://jsfiddle.net/utrwqfux/
或者你可以在这里查看：https: //jsfiddle.net/utrwqfux/
P.S.So if I force height on table it will ignore height on rows. Last tr was without height, so the idea was for it to re-size automatically filling empty gap.
PS因此，如果我在桌子上强制高度，它将忽略行上的高度。最后一个 tr 没有高度，所以我们的想法是让它自动调整大小以填补空白。
采纳答案by Stickers
You can set height:8pxto the first and second tr. And remove the middle border from the empty cells in the last tr.
您可以设置height:8px为第一个和第二个tr。并从最后一个tr.
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
.t-table td {
border: 1px solid black;
}
.t-table td:empty {
border-left: 0;
border-right: 0;
}<table class="t-table">
<tr style="line-height: 8px; height: 8px;">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px; height: 8px;">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>回答by Wart Claes
Basically I did this by creating the table in CSS and not in HTML. This give a bit more control.
基本上我是通过在 CSS 而不是 HTML 中创建表格来做到这一点的。这提供了更多的控制权。
HTML:
HTML：
<div class="table">
<div class="tr">
<div class="td">A</div>
<div class="td">B</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
</div>
</div>
CSS:
CSS：
.table {
background: rebeccapurple;
display: table;
height: 400px;
table-layout: fixed;
width: 400px;
}
.td {
background: hotpink;
display: table-cell;
height: 8px;
width: 200px;
}
Live example: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100
现场示例：http: //codepen.io/WartClaes/pen/mVxdQg?editors=1100
The only issue here is that the td's will be higher then 8px since their content is bigger then that. Is 8px the actual height?
这里唯一的问题是td's 将高于 8px，因为它们的内容大于那个。8px 是实际高度吗？
回答by Benneb10
I agree with Wart Claes on display divs as table elements vs using old school table layout. But the problem you're running into is that the browser is adding a tbody element into your table. This element is forcing the row height. To fix this there are two ways.
我同意 Wart Claes 将显示 div 作为表格元素与使用旧式表格布局的观点。但是您遇到的问题是浏览器正在向您的表格中添加一个 tbody 元素。此元素强制行高。要解决这个问题，有两种方法。
1) Set the tbody to display as block, this will make the browser disregard its display properties and do exactly as you want.
1) 将 tbody 设置为显示为块，这将使浏览器忽略其显示属性并完全按照您的意愿进行。
https://jsfiddle.net/benneb10/utrwqfux/1/
https://jsfiddle.net/benneb10/utrwqfux/1/
tbody{
display:block;
}
2) Set the table height of the table with the tbody:
2）用tbody设置table的table高度：
tbody{
height:400px;
overflow:auto;
overflow-x:hidden;
border: 1px solid black;
}
However, doing this won't make your table 400px as you want. It will force the tr to be exactly 8px though.
但是，这样做不会使您的表格达到您想要的 400 像素。不过，它会强制 tr 恰好为 8px。
回答by Head In Cloud
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
display: table-cell;
}
td {
border: 1px solid black;
padding:5px;
}
