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

【问题标题】：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

【问题讨论】：

你能提供一个演示吗？

标签： css asp.net header width html-table

【解决方案1】：

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

【讨论】：

更长
组头 ?

【解决方案2】：

为什么不只是为表头和表体使用不同的 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 个垂直子标题单元格，并且顶部标题文本较长，则子标题会被拉伸，如图所示，而表格的其余部分保持正常大小，因此标题会比表格宽。
你为什么要断开标题（顺便说一句，缺少？如果你不着急，我会在周末尝试再看看这个。