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中删除width属性。同时删除width属性，因为您已经设置了宽度表示表的宽度为20％，即900px的20％。

设置固定标题可滚动内容css只有html表

1 个答案: