TH 在 thead 中的宽度与 tbody 的 td 宽度不匹配

Question

我想清空表TD的内容，进行加载，然后显示最新的获取数据，但是问题是斜纹似乎有一些闪烁的问题，因为当tbody数据消失时会受到影响。

table {
  border-collapse: collapse;
}
table th,
table td {
  padding: 5px;
  border: 1px solid;
}

演示：https://jsfiddle.net/nlrpbz9r/1/

Answer 1

这是正常的... display: none元素不参与表宽度计算。您可以改用visibility: collapse：

$(function() {
  $('button').click(function() {
    const $tb = $("tbody");
    const new_visibility = $tb.css("visibility") === "visible" ? "collapse" : "visible";
    $("tbody").css({
      "visibility": new_visibility
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Toggle tbody</button>
<table border="1">
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>john wesley</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

不幸的是...当您将新数据插入tbody时，宽度将根据内容而变化。除了使用固定布局表外，没有好的解决方案。

Answer 2

在您的CSS中添加类似table th {min-width: 100px;}的东西。

$(function() {
  $('button').click(function() {
    const tb = $('tbody').clone()
    if ($(tb).length > 0) {
      $('tbody').hide()
    }
  })
})

table {
  border-collapse: collapse;
}
table th,
table td {
  padding: 5px;
  border: 1px solid;
}
table th {min-width: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>john wesley</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
<button>Hide tbody</button>

Answer 3

我猜我设置的两个属性，我们将解决您的问题：

table th,
table td {
  padding: 5px;
  border: 1px solid;
  width: 200px;
  text-align: center;
}

最后两行修复了您想要的值的每个TD宽度的宽度（而不是200个PX，最好按百分比设置它以支持责任），最后一行只是将文本放在中心位置。如果按下按钮，则标头单元将不会更改。