html - 如何在边缘隐藏表格行和列？

Question

例如，我有一个 82x82 的表。但我只想显示表格的中央 80x80 部分。隐藏的表格单元格仍然有一些数据，我只是不想显示它们。我的想法是将表格放入一个 div 中，以隐藏表格中不必要的部分。像这样：

#workspace {
  position: absolute;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -400px;
  overflow: hidden;
}

table {
  position: absolute;
  margin-left: -10px;
  margin-top: -10px;
  width: 820px;
  height: 820px;
}

<div id="workspace">
  <table>

  </table>
</div>

但是当我在 Mozilla 中打开控制台时，我看到了隐藏单元格的一部分（见表格底部）：

所以我的问题是如何解决这个问题？或者也许建议我用其他方法来隐藏表格中不必要的部分？

PS表格单元格是用javascript创建的

标签： htmlcss

Answer 1

使用nth-child()选择器获取和隐藏边缘的表格元素。

 tr:first-child,
 tr:last-child,
 td:first-child,
 td:last-child {
   display: none
 }