Question

我桌子的第一行有三个单元格。我试图用四个单元格建立第二行。我希望边界都一样。但是，我不能实现这一点，因为底行（具有四个单元格的行）上的单元格具有双边框或没有边框。我已经厌倦了边境崩溃和边境式的权利，没有运气。我怎样才能让底行看起来像顶行 - 只有一个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>

Answer 1

你有必要拥有嵌套表的原因吗？如果您希望两行看起来相同，请尝试添加更多行并调整每个单元格的colspan。如果找到三个和四个的最小公倍数，则可以创建一个包含十二列的表，并将一行的colspan设置为三列到四列，将colspan设置为四列列到三个。

使用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列的行，并且所有单元格都可以居中于另外，如果你想动态生成一个表，那么使用这种方法编写一个函数来创建每行所需的多个单元格并不困难。）

Answer 2

我看到两个问题。首先，嵌套表周围的<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/

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

2 个答案: