設置固定標題可滾動內容的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的width屬性。 還要刪除中的width屬性，因為您已經將width設置為表的20％寬度，即900px的20％。