Question

我有一张桌子，当我调整大小时，它不会在网络视图上显示我的标题Steps，但确实可以完美显示-但是当我调整大小时，我看不到我的Steps标题。有没有办法在下面的代码中使用CSS或jstl / jsf标签解决此问题？谢谢您的帮助。像这样的东西：https://imgur.com/a/cSRshbD

出现图片：https://imgur.com/a/JblB5t6

这是我的代码：

                  <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

基于w3schools https://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>

标头不响应表？

1 个答案: