无法使 CSS 表格边框在整个表格和嵌套表格中保持一致

表中的第一行有三个单元格。我正在尝试设置包含四个单元格的第二行。我希望边界都是一样的。但是，只要底行（具有四个单元格的行）上的单元格具有双边框或没有边框，我就无法实现这一目标。我已经厌倦了边界崩溃和边界风格右，没有运气。如何让底行看起来像顶行一样 - 只有一个 1px 边框 - 除了 4 个单元格而不是三个单元格？这是我的代码：

<style type="text/css"> 
table
{
    border-collapse:collapse;
}
table.outer
{
    border: 1px black solid;
    border-collapse: collapse;
    width:750px;
}
table.outer td
{
    border: 1px black solid;
    border-collapse: collapse;
}
table.nested
{
    width: 750px;
}
table.nested td
{
    border:0px black solid;
    border-collapse:collapse;
}   
</style>    
</head>
<body>
<table class="outer">
  <tr>
    <td>foo 1</td>
    <td>foo 2</td>
    <td>foo 3</td>
  </tr>
        <td colspan="3">
            <table class="nested">
              <tr>
                <td>bar 1</td>
                <td>bar 2</td>
                <td>bar 3</td>
                <td>bar 4</td>
              </tr> 
            </table>
        </td>   
</table>

有什么

理由必须有一个嵌套表吗？如果希望两行看起来相同，请尝试添加更多行并调整每个单元格的colspan。如果找到 3 和 4 的最小公倍数，则可以创建一个包含 12 列的表，并将包含三列的行的colspan设置为 4，将包含 4 列的行的colspan设置为 3。

在

表中嵌套表可能会在 CSS 中出现问题，并且对于页面来说也更重。

<table class="outer">
  <tr>
    <td colspan="4">foo 1</td>
    <td colspan="4">foo 2</td>
    <td colspan="4">foo 3</td>
  </tr>
  <tr>
    <td colspan="3">bar 1</td> 
    <td colspan="3">bar 2</td>
    <td colspan="3">bar 3</td>
    <td colspan="3">bar 4</td>
  </tr>
</table>

这样，如果您想在

两行之间共享通用样式，还可以仅使用一个 CSS td选择器设置所有单元格的样式。

答案的额外解释：（使用 LCM 作为表格的总列数可确保每个单元格可以与其行中的其他单元格大小相同，而不会影响其他行中单元格的大小。只要表中的列总数能被 n 整除，就可以创建包含 n 个单元格的行。因此，使用此十二列宽的表格，您可以拥有 1、2、3、4、6 或 12 列的行，并且所有单元格都可以以表格中间为中心。此外，如果要动态生成表，则使用此方法编写一个函数来创建每行中所需的单元格数量并不难。

我看到两个问题。首先，嵌套表周围的<td>标签实际上应该是<tr>标签。其次，嵌套表border宽度应该是1px，而不是0px。

.HTML：

<table class="outer">
    <tr>
        <td>foo 1</td>
        <td>foo 2</td>
        <td>foo 3</td>
    </tr>
    <tr colspan="3">
        <table class="nested">
            <tr>
                <td>bar 1</td>
                <td>bar 2</td>
                <td>bar 3</td>
                <td>bar 4</td>
            </tr> 
        </table>
    </tr>   
</table>

.CSS：

table {
    border-collapse:collapse;
}
table.outer {
    border: 1px black solid;
    border-collapse: collapse;
    width:750px;
}
table.outer td {
    border: 1px black solid;
    border-collapse: collapse;
}
table.nested {
    width: 750px;
}
table.nested td {
    border:1px black solid;
    border-collapse:collapse;
}

JS小提琴：http://jsfiddle.net/5D2hN/

相关内容

最新更新

热门标签：