3

这是我得到的，边框折叠不起作用：

在此处输入图像描述

更新： 我所说的边框折叠不起作用的意思是你可以清楚地看到内表有一个双边框，看起来不太好。

代码的简化版本：

<style>
table, tr, td
{
    padding:0;
    margin:0;
    border-collapse: collapse;
}
td
{
    border:1px solid black;
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
</tr>
<tr>
    <td colspan="3">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Content inner</td>
                <td>Content inner</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
</tr>
</table>
4

1 回答 1

1

我认为你想要的是单元格的组合border-left和border-top除了表格本身的左侧之外的所有边的边框。然后，您将使用:first-child伪选择器去除border-top第一行中单元格的多余部分。

border-collapse与我认为您所期望的效果不同（我知道这并不完全直观）。有关实际操作的示例，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse 。border-collapse

有关上述技术的示例，请参阅 Twitter Bootstrap 中的 .table-bordered 类。我试图从那里复制和粘贴代码，但它有点分散，而且源代码在 LESS 中，所以如果你想查看它，最好直接去 Bootstrap 主页。（我之前在这里发布的示例不太正确。）

于 2013-05-27T06:12:31.527 回答