固定的高度和宽度更改为标题（HTML表） [英] Fixed Height and Changing Width for Header (HTML Table)
问题描述
我需要确保该表的头的高度是固定的，宽度是根据在标题单元含量调整。 （标题文字是最大的两行显示的），我们怎样才能使用样式做什么呢？另外，我想确保表行的宽度是一样的标题行的宽度（即标题行决定宽度）。
注：在present，交易部门所有者别名进来线。它需要有两个行。
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;＆LT; HEAD＆GT;＆LT;标题＆GT;
＆LT; /标题＆GT;＆LT;链接HREF =样式/ TestStyle.css的rel =stylesheet属性类型=文/ CSS/＆GT;＆LT; /头＆GT;＆LT;身体GT;
＆LT; DIV ID =divForTransactionGrid＆GT; ＆LT; DIV＆GT; ＆LT;表CELLSPACING =0规则=所有边界=1ID =grdTransactions的风格=边界崩溃：崩溃;＆GT; ＆LT;＆THEAD GT; ＆所述; TR＆GT; 百分位范围=山口＆GT;事务ID＆LT; /第i个百分位范围=山口＆GT;事务名和LT; /第i个百分位范围=山口＆GT;事务所有者＆LT; /第i＆LT;日范围=山口＆GT;交易部所有者别名＆LT; /第i ＆LT; / TR＆GT; ＆LT; / THEAD＆GT;＆LT;＆TBODY GT; ＆所述; TR＆GT; ＆所述; TD→1＆下; / TD＆GT;＆下; TD＆GT; TR1与所述; / TD＆GT;＆下; TD＆GT; Lijo＆下; / TD＆GT;＆下; TD＆GT; Lijo＆下; / TD＆GT; ＆所述; / TR＆GT;＆下; TR＆GT; ＆所述; TD→2＆下; / TD＆GT;＆下; TD＆GT; TR2'下; / TD＆GT;＆下; TD＆GT; Lijo＆下; / TD＆GT;＆下; TD＆gt;这是一个测试值来测试的结果在实时场景。行宽度应相同头宽度LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; / TBODY＆GT; ＆LT; /表＆gt; ＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;
CSS
#divForTransactionGrid{宽度：300像素;高度：250像素;溢出：滚动;}
您最大的问题是打破。结果交易部所有者别名结果
让每个空间，然而突破到一个新行，结果交易＆放大器; NBSP;＆系功放; NBSP;拥有者放; NBSP;＆别名放大器; NBSP;名称结果
将迫使句呆在一起，仿佛一个字。搜索结果
所有你需要做的就是离开你想让它打破一个常规的空间，使用和放大器; NBSP;的，你不希望它打破，你将有2个或更少的线。整整2线，使用换行符＆LT; BR＆GT;而不是打破空间。祝您好运。
I need to make sure that the height of the header of table is fixed and width is adjusted based on the header cell content. (Header text is displayed in maximum two rows) How can we do it using styles? Also, I want to make sure that the width of table rows is same as width of header row (i.e., header row determines width).
Note: At present, "Transaction Department Owner Alias Name" comes in lines. It need to come in two lines.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link href="Styles/TestStyle.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id = "divForTransactionGrid">
<div>
<table cellspacing="0" rules="all" border="1" id="grdTransactions" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Transaction ID</th><th scope="col">Transaction Name</th><th scope="col">Transaction Owner</th><th scope="col">Transaction Department Owner Alias Name</th>
</tr>
</thead><tbody>
<tr>
<td>1</td><td>TR1</td><td>Lijo</td><td>Lijo</td>
</tr><tr>
<td>2</td><td>TR2</td><td>Lijo</td><td>This is a test value to test the result in real time scenario. Row width should be same as header width</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
#divForTransactionGrid
{
width: 300px;
height: 250px;
overflow:scroll;
}
You biggest issue is breaking.
Transaction Department Owner Alias Name
lets each space " " break to a new line, however
Transaction Department Owner Alias Name
will force the sentence to stay together as if a single word.
All you have to do is leave one regular space where you want it to break, and use 's where you don't want it to break and you will have 2 or less lines. for exactly 2 lines, use a line break <br> instead of a breaking space " ". Best of luck.
这篇关于固定的高度和宽度更改为标题（HTML表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
