【发布时间】：2018-11-28 15:08:11
【问题描述】：
我有一个表格，当我调整大小时，它不会在 Web 视图上显示我的标题 Steps，它确实显示得很好 - 但是当我调整大小时，我看不到我的 Steps 标题。有没有办法在下面的代码中使用 css 或 jstl/jsf 标签解决这个问题？谢谢您的帮助。像这样：https://imgur.com/a/cSRshbD
这是我的代码：
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;
}
}<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> 【问题讨论】：
-
所以如果你创建一个没有jstl的静态表（实际上这与jsf无关）它可以工作吗？
-
但是，它使用静态表格。如果您愿意，我可以向您展示静态方式 - 但是，我想使用上面的代码。
-
然后看看 client-sIde html 中静态创建的表和基于 jstl 的表之间的差异。不应该太难，也很可能与 jstl 无关。并在问题中发布所有相关信息
标签： html css jstl responsive