html - 调整大小时标题没有响应

Question

我有一个表格，当我调整大小时，它不会Steps在 Web 视图上显示我的标题，但它确实显示得很好 - 但是当我调整大小时，我看不到我的 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> 

标签： htmlcssjstlresponsive

Answer 1

这是我的答案：

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;
}



tr.responsive-table-item .responsive-table-cell {
  display: none;
}

   
@media (max-width: 768px) {
  
  .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);
   
    word-break: break-all;
    vertical-align: top;
  }
}

<table class="responsive-table">
  <thead>
    <tr class="table-header">
      <th></th>
      <th class="right-header">Step 1</th>
      <th class="right-header">Step 2</th>
      <th class="right-header">Step 3</th>
      <th class="right-header">Step 4</th>
      <th class="right-header">Step 5</th>
      <th class="right-header">Step 6</th>
      <th class="right-header">Step 7</th>
      <th class="right-header">Step 8</th>
    </tr>
  </thead>
  <tbody>
    
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $57.36</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $58.94</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $60.56</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $62.23</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $65.70</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $69.37</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $73.23</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $77.31</td>
    </tr>
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $4,588.80</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $4,715.20</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $4,844.80</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $4,978.40</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $5,256.00</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $5,549.60</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $5,858.40</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $6,184.80</td>
    </tr>
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $119,767.68</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $123,066.72</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $126,449.28</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $129,936.24</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $137,181.60</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $144,844.56</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $152,904.24</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $161,423.28</td>
    </tr>
  </tbody>
</table>