1

テーブルの最初の行には3つのセルがあります。4つのセルで2番目の行を設定しようとしています。境界線はすべて同じにしたいと思います。ただし、一番下の行（4つのセルがある行）のセルに二重の境界線があるか、境界線がない限り、これを実現することはできません。私はボーダー崩壊とボーダースタイルの権利に疲れましたが、運がありません。3つのセルではなく4つのセルを除いて、下の行を上の行と同じように（1pxの境界線を1つだけ）表示するにはどうすればよいですか？これが私のコードです：

<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

ネストしたテーブルが必要な理由はありますか? 2 つの行を同一に見せたい場合は、さらに行を追加しcolspan、各セルの を調整してみてください。3 と 4 の両方の最小公倍数がわかれば、12 列の表を作成し、colspan3 列colspanの行の を 4 に、4 列の行の を 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>

tdこのように、2 つの行間で共通のスタイルを共有したい場合は、1 つの CSS セレクターだけですべてのセルのスタイルを設定することもできます。

回答の追加説明: (テーブルの列の総数として LCM を使用すると、他の行のセルのサイズに影響を与えることなく、各セルがその行の他のセルと同じサイズになることが保証されます。行を作成できます。テーブル内の列の総数が n で割り切れる限り、n 個のセルを使用します。したがって、この 12 列幅のテーブルでは、1、2、3、4、6、または 12 列の行、およびすべてのセルを使用できます。また、テーブルを動的に生成したい場合、この方法で各行に必要な数のセルを作成する関数を書くことはそれほど難しくありません.)

于 2012-06-29T14:31:50.230 に答える
0

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/

于 2012-06-29T14:23:49.493 に答える