1

我表中的第一行有三个单元格。我正在尝试设置具有四个单元格的第二行。我希望所有的边界都是一样的。但是，我无法做到这一点，因为底行（有四个单元格的行）的单元格要么有双边框，要么没有边框。我已经厌倦了border-collapse和border-style-right，没有运气。我怎样才能让底行看起来就像顶行一样 - 有一个 1px 边框 - 除了 4 个单元格而不是 3 个单元格？这是我的代码：

<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>

4

2 回答 2

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>

这样td，如果您想在两行之间共享一个通用样式，您也可以只使用一个 CSS 选择器来设置所有单元格的样式。

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

于 2012-06-29T14:31:50.230 回答
0

我看到两个问题。首先，<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/

于 2012-06-29T14:23:49.493 回答