header not being responsive when resizing

问题

I have a table where when I resize it wont show my header Steps on the web view it does show perfectly - but when I resize I don't get to see my Steps header. is there way to fix this in my code below with css or jstl/jsf tags? thanks for the help. Something like this: https://imgur.com/a/cSRshbD

Image appears:

here is my code:

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>

回答1:

Here is my answer:

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>

回答2:

try width: 13% in left-header class

left-header{
width: 13%;
font-weight:normal;
color:#039;
border-right:2px solid #6678b1;
padding:10px 8px;
text-align:left;
}

回答3:

When the table starts looking bad try media queries for e.g. :

@media all and (max-width: XXXpx){
here you need to put new css styles for example ( smaller font or sthg)
}

来源：https://stackoverflow.com/questions/53522492/header-not-being-responsive-when-resizing

标签

html

css

jstl

responsive