如何限制标题单元格的宽度
Posted
技术标签:
【中文标题】如何限制标题单元格的宽度【英文标题】：How to limit width of header cell 【发布时间】：2016-03-24 19:26:07 【问题描述】：如您所见，我有一个带有复杂标题的表格。当文本很长时，我需要防止水平标题单元格扭曲子标题宽度。
标题和表格位于不同的 div 中。表格是动态构建和填充的。
困难的部分是使下面单元格的宽度完全保持我在 CSS 中指定的宽度，而顶部标题单元格的宽度被限制为下面单元格的宽度。
顶部标题单元格具有以下 CSS 样式：
overflow: hidden;
white-space: nowrap;
table-layout: fixed;
display: block;
width: 100%;
Asp.net，IE 11，VS 2008
【问题讨论】：
你能提供一个演示吗？ 【参考方案1】：您的评论说每个标题单元格都有 100%。如果要使用百分比，则应将 100 除以单元格数，然后将其用作每个单元格的百分比。
【讨论】：
为什么不只是为表头和表体使用不同的 div ......而不是让所有表行彼此成比例。像这样的东西。。 类似的东西。
body
padding-top: 10px;
padding-left: 10px;
.scrolltable
overflow-x: visible;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
.scrolltable > .header .scrolltable > .tbody
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
/* an outside constraint to react against */
table
border: 1px solid black;
font-size: 90%;
border-collapse: collapse;
th,
td
border-radius: 25px;
width: 120px;
border: 1px solid black;
th
white-space: nowrap;
border-width: 1px;
font-weight: bold;
height: 140px;
padding-top: 5px;
padding-bottom: 5px;
transform:translate(25px, 51px) rotate(270deg);
td
border-width: 1px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
<body>
<div id="constrainer">
<div class="scrolltable">
<table class="header"> <!-- first div for header -->
<thead>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
</thead>
</table>
<div class="tbody">
<table><!-- second div for table body /content -->
<tbody>
<tr>
<td>
header
</td>
<td id="inp01">
</td>
<td id="inp02">
</td>
<td id="inp03">
</td>
<td id="inp04">
</td>
<td id="inp05">
</td>
</tr>
<tr>
<td>
01
</td>
<td id="inp11">
</td>
<td id="inp12">
</td>
<td id="inp13">
</td>
<td id="inp14">
</td>
<td id="inp15">
</td>
</tr>
<tr>
<td>
header
</td>
<td id="inp21">
</td>
<td id="inp22">
</td>
<td id="inp23">
</td>
<td id="inp24">
</td>
<td id="inp25">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>【讨论】：
我实际上是这样做的：] 单独的标题和单独的表体。但这不是那么重要。在任何情况下，顶部标题行（水平）总是比垂直副标题更宽。如果有 1 到 3 个垂直子标题单元格，并且顶部标题文本较长，则子标题会被拉伸，如图所示，而表格的其余部分保持正常大小，因此标题会比表格宽。 你为什么要断开标题（顺便说一句，缺少以上是关于如何限制标题单元格的宽度的主要内容，如果未能解决你的问题，请参考以下文章