如何制作一个 space 保留列使用 css 和 table 标签

Question

去除上下边框最优雅的方法是什么？

table {
  border: 1px solid #CCC;
  border-collapse: collapse;
  text-align: center;
}
.noborder {
  border: none;
  width: 50px;
}

<br>
<table border='1' width='500'>
  <tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th class="noborder">&nbsp;</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>AA</td>
    <td>BB</td>
    <td>CC</td>
    <td>DD</td>
    <td class="noborder">&nbsp;</td>
    <td>FF</td>
  </tr>
</table>

JSfiddle Demo

Answer 1

您需要为 th 和 td 元素而不是整个 table 应用边框。为 table 设置边框不会受到应用于子元素的 noborder class 的影响。

Updated JSfiddle

table {
  border-collapse: collapse;
  text-align: center;
}
.noborder {
  border: none;
  width: 50px;
}
th,
td {
  border: 1px solid #CCC;
}

<br>
<table width='500'>
  <tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th class="noborder">&nbsp;</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>AA</td>
    <td>BB</td>
    <td>CC</td>
    <td>DD</td>
    <td class="noborder">&nbsp;</td>
    <td>FF</td>
  </tr>
</table>

Answer 2

我会说只指定您需要的边框。如果你不想要顶部和底部...只设置左右边框。

table {
  border-left: 1px solid #000;
  border-left: 1px solid #000;
}

如果您只想删除该空白列的顶部和底部，您可以尝试分别为每列设置边框，从而允许删除所需的边框。

td {
  border: 1px solid #000;
}
#blank-td {
  border: none /* or even 1px solid #fff */;
}

随便乱搞更多信息：http://www.w3schools.com/css/css_border.asp

如何制作一个 space 保留列使用 css 和 table 标签

how to make a space-keeping column use css and table tag

html

css

border