如何固定TR的高度? [英] How to fix height of TR?
问题描述
是否可以固定表格上的行高 (tr)?
当我缩小浏览器窗口时出现问题，一些行开始播放，我无法固定行高.
我尝试了几种方法:tr width="20"/tr style="height:20px"/td height="20"/td style="height:20px"
我使用的是 IE7
风格
.tableContainer{颜色:#0076BF；边距:-10px 0px -10px 0px;边框间距:10px；空单元格:显示；宽度:90%；文本对齐:左；}.tableContainer tr td{空白:nowrap;文本对齐:左；}HTML 代码.
<tr style="height:15px;"><td>NHS号码</td><td> </td><td>访问日期</td><td> </td><td colspan="3">护理时间开始</td><td> </td><td rowspan="2" style="text-align:right;vertical-align:bottom;">☑</td><td rowspan="2" style="font-weight:bold;vertical-align:bottom;">勾选何时<br/>护理开始</td></tr><tr><td width="90" class="tableContainerRow2"> </td><td > </td><td width="80" class="tableContainerRow2"> </td><td > </td><td width="40" class="tableContainerRow2"> </td><td width="5">:</td><td width="40" class="tableContainerRow2"> </td><td > </td></tr>
当涉及到固定高度而不是环绕文本时，表格是不确定的(至少在 IE 中).我想您会发现唯一的解决方案是将文本放在 div 元素中，如下所示:
td.container >div {宽度:100%；高度:100%；溢出:隐藏；}td.container {高度:20px；}<tr><td class="容器"><div>这是一长行文字，设计为不换行当容器变得太小时.</td></tr></table>
这样，div 的高度就是包含单元格的高度，文本不能增长 div，无论如何保持单元格/行的高度相同窗口大小是.
Is it possible to fix the height of a row (tr) on a table?
The problem appears when I shrink the window of the browser, some rows start playing around, and I can not fix the height of the row.
I tried several ways:
tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"
I am using IE7
Style
.tableContainer{
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
text-align:left;
}
.tableContainer tr td{
white-space:nowrap;
text-align:left;
}
HTML code.
<table class="tableContainer" cellspacing="10px">
<tr style="height:15px;">
<td>NHS Number</td>
<td> </td>
<td>Date of Visit</td>
<td> </td>
<td colspan="3">Care Time Started</td>
<td> </td>
<td rowspan="2" style="text-align:right;vertical-align:bottom;">☑</td>
<td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/> care starts</td>
</tr>
<tr>
<td width="90" class="tableContainerRow2"> </td>
<td > </td>
<td width="80" class="tableContainerRow2"> </td>
<td > </td>
<td width="40" class="tableContainerRow2"> </td>
<td width="5">:</td>
<td width="40" class="tableContainerRow2"> </td>
<td > </td>
</tr>
</table>
解决方案 Tables are iffy (at least, in IE) when it comes to fixing heights and not wrapping text. I think you'll find that the only solution is to put the text inside a div element, like so:
td.container > div {
width: 100%;
height: 100%;
overflow:hidden;
}
td.container {
height: 20px;
}
<table>
<tr>
<td class="container">
<div>This is a long line of text designed not to wrap
when the container becomes too small.</div>
</td>
</tr>
</table>
This way, the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.
这篇关于如何固定TR的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆