設置固定標題可滾動內容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屬性表單。 同樣刪除寬度屬性，因爲您已經在 中設置了寬度，表示該表格的20％寬度，即900px的20％。