html - 没有外部边框但在某些单元格上有边框的表格

Question

需要创建复杂的 html 表格(或者可能使用 div？)。有表格数据，但此表不能有外部边框，但内部边框(单元格周围)应该只存在于选定的单元格。

换句话说:只有一些单元格应该有边框，而“表格周围”没有边框。

可以用html table 或者div 来实现吗？

Answer 1

是的，使用 HTML 表格是可能的。还有 split 。但我建议对表格数据使用表格而不是 div。

删除表格边框:

table {
  border: none;
}

为必需的 <td> 添加边框上课。

.bordered {
  border: 1px solid;
}

table {
  /* Optionally use,
  border-collapse: collapse; */
  border: none;
}

.bordered {
  border: 1px solid;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td class="bordered">Griffin</td>
  </tr>
  <tr>
    <td class="bordered">Lois</td>
    <td>Griffin</td>
  </tr>
</table>