this

this

关注
发信
Windows 8应用程序开发大赛在哪里提交
语音到文本服务
在iPhone上进行FFT以忽略背景噪音并找到较低的音高
信号量如何工作？
unix 信号如何工作?
如何在JavaScript / jQuery中实现重载？
最适合GUI书籍程序的语言
try catch子句会影响性能吗?
AIX上的proftpd的静态编译
C ++：仿真固定点除法/乘法
异步承诺返回函数的同步与异步执行
Python，二维列表和坐标
在golang中实施全局热键？
Rcpp:从 Rcpp 中的包调用 C 函数
三维几何：如何内插矩阵

标头在调整大小时没有响应

扫码查看
本文介绍了标头在调整大小时没有响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这是我的代码：



  table {margin：auto;宽度：100％;边界崩溃：崩溃； border-spacing：0;} th，td {padding：5px 10px;} tr {border-bottom：1px solid #ccc;} thead th {border-bottom：2px solid #ddd;} / *您需要显示： none负责表项目中的重复标题* / tr.response-table-item .response-table-cell {display：none;} / *发生中断时添加屏幕比例或类* / @ media（最大宽度： 768px）{/ *隐藏表格标题* / .table-header {display：none; } tr.sensitive-table-item {display：block; } tr.sensitive-table-item .active-table-cell {display：inline-block; } tr。response-table-item td：first-child {background-color：#ccc;显示：块；文本对齐：居中；宽度：100％; } tr.response-table-item td，tr.response-table-item th {display：inline-block;宽度：calc（50％-22px）; / *单元格边框+填充* /断字：全部中断；垂直对齐：顶部； }}  
 < table class = response-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 = response-table-cell>步骤＃{stepNumber}< / th> < / c：if> < / c：forEach> < / tr> < c：forEach items =＃{testBean.jobEntity.jobRows} var = jobRow> < tr class = response-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>

解决方案

这是我的答案： 



  table {margin：auto;宽度：100％;边界崩溃：崩溃； border-spacing：0;} th，td {padding：5px 10px;} tr {border-bottom：1px solid #ccc;} thead th {border-bottom：2px solid #ddd;} tr.sensitive-table-item。响应表单元格{显示：无；} @media（最大宽度：768像素）{.table-header {显示：无； } tr.sensitive-table-item {display：block; } tr.sensitive-table-item .active-table-cell {display：inline-block; } tr。response-table-item td：first-child {background-color：#ccc;显示：块；文本对齐：居中；宽度：100％; } tr.response-table-item td，tr.response-table-item th {display：inline-block;宽度：calc（50％-22px）;断字：全力以赴；垂直对齐：顶部； }}  
 < table class = response-table > < thead> < tr class = table-header> < th< / th> < th class = right-header>步骤1< / th> < th class = right-header>步骤2< / th> < th class = right-header>步骤3< / th> < th class = right-header>步骤4< / th> < th class = right-header>步骤5< / th> < th class = right-header>步骤6< / th> < th class = right-header>步骤7< / th> < th class = right-header>步骤8< / th> < / tr> < / thead> < tbody> < tr class = response-table-item> < td class = left-header> Test< / td> < th class = response-table-cell<步骤1< / th> < td class = left-header> $ 57.36< / td> < th class = response-table-cell>步骤2< th < td class = left-header> $ 58.94< / td> < th class = response-table-cell>步骤3< th < td class = left-header> $ 60.56< / td> < th class = response-table-cell>步骤4< / th> < td class = left-header> $ 62.23< / td> < th class = response-table-cell>步骤5< th < td class = left-header> $ 65.70< td> < th class = response-table-cell>步骤6< / th> < td class = left-header> $ 69.37< / td> < th class = response-table-cell>步骤7< th < td class = left-header> $ 73.23< / td> < th class = response-table-cell>步骤8< th < td class = left-header> $ 77.31< / td> < / tr> < tr class = response-table-item> < td class = left-header> Test< / td> < th class = response-table-cell<步骤1< / th> < td class = left-header> $ 4,588.80< / td> < th class = response-table-cell>步骤2< th < td class = left-header> $ 4,715.20< / td> < th class = response-table-cell>步骤3< th < td class = left-header> $ 4,844.80< / td> < th class = response-table-cell>步骤4< / th> < td class = left-header> $ 4,978.40< / td> < th class = response-table-cell>步骤5< th < td class = left-header> $ 5,256.00< / td> < th class = response-table-cell>步骤6< / th> < td class = left-header> $ 5,549.60< / td> < th class = response-table-cell>步骤7< th < td class = left-header> $ 5,858.40< / td> < th class = response-table-cell>步骤8< th < td class = left-header> $ 6,184.80< / td> < / tr> < tr class = response-table-item> < td class = left-header> Test< / td> < th class = response-table-cell<步骤1< / th> < td class = left-header> $ 119,767.68< / td> < th class = response-table-cell>步骤2< th < td class = left-header> $ 123,066.72< / td> < th class = response-table-cell>步骤3< th < td class = left-header> $ 126,449.28< / td> < th class = response-table-cell>步骤4< / th> < td class = left-header> $ 129,936.24< / td> < th class = response-table-cell>步骤5< th < td class = left-header> $ 137,181.60< / td> < th class = response-table-cell>步骤6< / th> < td class = left-header> $ 144,844.56< / td> < th class = response-table-cell>步骤7< th < td class = left-header> $ 152,904.24< td> < th class = response-table-cell>步骤8< th < td class = left-header> $ 161,423.28< / td> < / tr> < / tbody>< / table>


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>

解决方案

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>

这篇关于标头在调整大小时没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-20 04:33
查看更多
Powered by LMLPHP ©2025 this 0.046631