如何限制标题单元格的宽度

Question

如您所见，我有一个包含复杂标题的表格。我需要防止水平标题单元在文本很长时扭曲副标题宽度。

标题和表格位于不同的div中。表是动态构建和填充的。

问题

困难的部分是使下面的单元格宽度保持与CSS中指定的完全相同，而顶部标题单元格宽度限制为下面单元格的宽度。

CSS

热门标题单元格具有以下CSS样式：

overflow: hidden;
white-space: nowrap;
table-layout: fixed;
display: block;
width: 100%;

我尝试了不同的表格布局，溢出和宽度。

SOFTWARE

Asp.net，IE 11，VS 2008

Answer 1

你的评论说每个标题单元格都有100％。如果您要使用百分比，则应将100除以单元格数，并将其用作每个单元格的百分比。

Answer 2

为什么不只是为表格的标题和正文使用不同的div ...比你可能保持所有表格行彼此成比例的方式。像这样的东西...... 这样的事情。

＆＃13;

＆＃13;

<a href="" data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>" >Submit Form</a>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;