html - 如何将表格的边框环绕在未满的行周围？

Question

我想创建一个由几行中的多个单元格组成的表格，当单元格的数量不适合表格大小的 100% 时，主表格的边框将不会显示为一个精确的正方形，而是换行本身围绕内容。

例如:

<table border = "2px">
    <tr>
        <td>1</td><td>2</td>
    </tr>
    <tr>
        <td>3</td>
     </tr>
</table>

这是目前的情况:

这就是我的目标:

Answer 1

您可以通过包含冗余单元格并使用 CSS empty-cells 属性隐藏它们来实现这一点。

HTML

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td></td>
    </tr>
</table>

CSS

table td {empty-cells:hide;border:3px double;}

注意表格本身没有边框，而是直接给单元格本身。不幸的是，这不能与 border-collapse:collapse; 声明结合使用。

参见jsFiddle demo

---

编辑

如果需要第二个边框，您可以使用 border-style 属性的 double 值。更新了上面的 CSS 和 fiddle 以反射(reflect)这一点。