固定高度和更改标题的宽度(HTML表)

时间:2012-04-02 14:50:51

标签: javascript jquery asp.net html css

我需要确保表格标题的高度是固定的,并根据标题单元格内容调整宽度。 (标题文本最多显示两行)我们如何使用样式?另外,我想确保表行的宽度与标题行的宽度相同(即标题行确定宽度)。

注意:目前,“交易部门所有者别名”排在第一位。它需要分为两行。

enter image description here

<!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;

}

1 个答案:

答案 0 :(得分:2)

你最大的问题是打破 Transaction Department Owner Alias Name
让每个空格“”打破一个新的行,但是 Transaction&nbsp;Department&nbsp;Owner&nbsp;Alias&nbsp;Name
会迫使这句话像一个单词一样保持在一起。

你所要做的就是在你希望它打破的地方留一个常规空间,并使用你不希望它破坏的地方,你将拥有2行或更少的行。对于正好2行,使用换行符&lt; br&gt;而不是打破空间“”。祝你好运。