html - 仅设置固定标题可滚动内容 css html 表

Question

我需要一个带有固定标题和可滚动内容的 html 表格。我正在使用spring和jsp。代码类似于

<table class="resultsTable" border="1" bordercolor="grey" cellpadding="0" cellspacing="0" width="100%" height = "50%">
<thead class="fixedHeader">
  <tr>
            <th width="20%">Name</th>
            <th width="20%">Parameter1</th>
            <th width="20%">Parameter1</th>
            <th width="20%">Parameter1</th>
            <th width="20%">Parameter1</th>
        </tr>
    </thead>
    <tbody class="scrollContent">
        <c:forEach var=" object" items="${objectsList}"
            varStatus="loopStatus">
            <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
                <td width="20%">${ object.name}</td>
                <td width="20%">${ object.param1}</td>
                <td width="20%">${ object.param2}</td>
                <td width="20%">${ object.param3}</td>
                <td width="20%">${ object.param4}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

而CSS是

table.resultsTable {
  width: 900px;
  border: 2px solid grey;
  border-radius: 8px;
}

thead.fixedHeader tr {
  position: relative;
  display: block;
  width: 100%;
  background-color: grey;
}

tbody.scrollContent {
  display: block;
  height: 350px;
  overflow: auto;
  width: 100%;
   }

我期望的是列宽必须相同。但是我得到宽度减小的列，即。column1 的宽度最大，然后继续减小。第 5 列是最小宽度。为什么会这样？

Answer 1

请从 tbody 和 thead 中删除宽度属性。还要删除宽度属性，因为您已经设置了宽度，表示表格的 20% 宽度，即 900 像素的 20%。