CSS响应式表格初始隐藏行显示后布局偏移问题求助

用CSS实现了响应式表格，通过jQuery的show()/hide()（本质设置display:none）隐藏部分行，但隐藏行被显示后会向左偏移，无法占满表格宽度；未隐藏的行无此问题，若不提前隐藏则移动端显示正常。尝试为显示后的行添加CSS样式，所需样式已存在却未生效；改用visibility:hidden替代也遇到更多问题。

原因分析 #

jQuery的show()方法会将元素的display属性重置为浏览器默认值，而响应式表格中我们为<tr>设置了display:block，但jQuery显示隐藏行时会把它改回表格行的默认display:table-row，导致移动端的响应式样式失效，行无法占满宽度。

解决办法 #

放弃使用jQuery原生的show()/hide()，改用添加/移除自定义CSS类来控制显示隐藏，确保响应式样式不被覆盖：

• 新增一个用于隐藏元素的CSS类：.hidden { display: none !important; }
• 初始时给目标行添加该类，替代$(".hiddenRow").hide()
• 点击按钮时用toggleClass()切换类，替代toggle()

修改后的完整代码 #

<style>
  .hidden {
    display: none !important;
  }

  @media only screen and (max-width: 500px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr { border: 1px solid #ccc; }

    #no-more-tables td { 
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:center;
    }

    #no-more-tables td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /* Label the data */
    #no-more-tables td:before { content: attr(data-title); }
}
</style>
<table id="no-more-tables" style="width:400px">
    <thead>
        <tr>
            <th>header01</th>
            <th>header02</th>
            <th>header03</th>
            <th>header04</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="header01">cell data</td>
            <td data-title="header02">cell data</td>
            <td data-title="header03">cell data</td>
            <td data-title="header04">cell data</td>
        </tr>
    <tr class="hiddenRow hidden">
            <td data-title="header01">hidden data</td>
            <td data-title="header02">hidden data</td>
            <td data-title="header03">hidden data</td>
            <td data-title="header04">hidden data</td>
        </tr>
    <tr>
            <td data-title="header01">cell data</td>
            <td data-title="header02">cell data</td>
            <td data-title="header03">cell data</td>
            <td data-title="header04">cell data</td>
        </tr>
    </tbody>
</table>
<button class="unhideButton">
toggle the row
</button>

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>
<script type="text/javascript">
  $(".unhideButton").click(function() {
      $(".hiddenRow").toggleClass("hidden");
  });
</script>

内容的提问来源于stack exchange，提问作者sephiroth