javascript - 标题的固定高度和变化宽度(HTML 表格)

标签 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;

}

最佳答案

你最大的问题是打破。
交易部门负责人别名
让每个空格“”换行,但是
交易 部门 所有者 别名 姓名
将迫使句子像一个单词一样保持在一起。

您所要做的就是在您希望它中断的地方留下一个常规空间,并在您不希望它中断的地方使用  's 并且您将有 2 行或更少的行。对于恰好 2 行,使用换行符
而不是换行符“”。祝你好运。

关于javascript - 标题的固定高度和变化宽度(HTML 表格),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9978592/

相关文章:

jquery - 用按钮切换 div

javascript - 使用 getJson 分解树

c# - Visual Studio 未将设计器连接到代码隐藏

c# - 适用于 iis6 和 iis7 的 Web 项目 MSI

c# - 如何管理用户 claim ?

javascript - 显示更多/显示更少 CSS JS 动画不起作用

javascript - JQuery 显示/隐藏按钮取决于文本区域字符数

javascript - 在路由器 Action 中加载组件与路由器初始化之前加载组件的优缺点

javascript - 将带有参数的事件监听器添加到循环中的元素

javascript - 如何在清空输入字段后删除它