表头对表没有响应

Question

我有一个表，当我调整大小时，它不会在web视图上显示我的标题Steps，它确实显示得很完美，但当我调整尺寸时，我看不到我的Steps标题。有没有办法用css或jstl/jsf标记在下面的代码中解决这个问题？谢谢你的帮助。类似于以下内容：https://i.stack.imgur.com/t1vV0.jpg

出现图像：https://i.stack.imgur.com/PYSM9.jpg

这是我的代码：

<table class="responsive-table">

<thead>
<tr class="table-header"> 
<th></th>

<c:forEach var="stepNumber" begin="1" end="#{testBean.jobEntity.stepSize}" varStatus="loop">
<c:if test="${loop.index lt 9}"> 
<th  class="responsive-table-cell">Step #{stepNumber}</th>
</c:if>
</c:forEach>
</tr>

<c:forEach items="#{testBean.jobEntity.jobRows}" var="jobRow"> 
<tr class="responsive-table-item">
<td class="left-header">#{jobRow.rateType}</td>
<c:forEach items="#{jobRow.steps}" var="step" varStatus="loop">
<c:if test="${loop.index lt 8}"> 
<th class="left-header">#{step.amount}</th>
</c:if>
</c:forEach>

</tr>
</c:forEach>
</thead>
</table> 

CSS：

table {
margin: auto;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 5px 10px;
}
tr {
border-bottom: 1px solid #ccc;
}
thead th {
border-bottom: 2px solid #ddd;
}
/* You will need to display:none the duplicated header in responsible-table-item*/
tr.responsive-table-item .responsive-table-cell {
display: none;
}
/* Add screen proportion or class when break occurs */
@media (max-width: 768px) {
/* Hide table headers */
.table-header {
display: none;
}
tr.responsive-table-item {
display: block;
}
tr.responsive-table-item .responsive-table-cell {
display: inline-block;
}
tr.responsive-table-item td:first-child {
background-color: #ccc;
display: block;
text-align: center;
width: 100%;
}
tr.responsive-table-item td,
tr.responsive-table-item th {
display: inline-block;
width: calc(50% - 22px);
/* Cell Border + padding*/
word-break: break-all;
vertical-align: top;
}
}

Answer 1

基于w3schoolshttps://www.w3schools.com/bootstrap/bootstrap_tables.asp

这可能会帮助你

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Steps</th>
<th>Hourly</th>
<th>Biweekly</th>
<th>Annual</th>
</tr>
</thead>
<tbody>
<tr>
<td>step 1</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
<tr>
<td>step 2</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
<tr>
<td>step 3</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
</tbody>
</table>
</div>