HTML CSS 表格行高控制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14811223/
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
HTML CSS table row height control
提问by xoxox
I have a table with two rows of which I would like to shrink the upper one (highlighted in blue) to the height of its child div (.black), but I couldn't control the height.
我有一张有两行的桌子，我想将上面的一行（以蓝色突出显示）缩小到其子 div ( .black) 的高度，但我无法控制高度。
I have tried modifying
我试过修改
- the div's margin
- the row's margin, padding and height
- table's
table-layoutstyle attribute
- div 的边距
- 行的边距、填充和高度
- 表格的
table-layout样式属性
but none of these brought me any further.
但这些都没有让我更进一步。
Codepenwith full source code.
带有完整源代码的Codepen。
The table:
桌子：
<table>
<tr>
<td rowspan="2" style="padding-left: 10px;">
<div class="col1"></div>
</td>
<td style="height: 1px;">
<div class="black"></div>
</td>
</tr>
<tr>
<td>
<div class="out"></div>
</td>
</tr>
</table>
The div's style:
div的样式：
div.black {
display: inline-block;
width: 128px;
height: 10px;
background-color: black;
vertical-align: top;
margin: 0px;
margin-left: 10px;
}
回答by Kingk
Instead of this <td style="height: 1px;">put <td style="font-size: 10px;">, and you may have to also add line-height: 0px.
而不是这个 <td style="height: 1px;">put <td style="font-size: 10px;">，你可能还需要添加line-height: 0px.
