1

htmlにテーブルがあり、実際に結合されるのではなく、いくつかのセルが結合されているように見えるようにする必要があります。これは、各セルの背景が異なる必要があるためです。

したがって、左端のセルから右の境界線を取り除く必要があります。右端のセルから左の境界線を取り除きます。中央のセルから両方の境界線を取り除きます。

これは、2行7セルのテーブルがある例です。2行目では、セルは2つのセルとしてのみ表示されます。1つは5列にまたがり、もう1つは7列にまたがります。

<table>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td style="background-color:white; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:green; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:black; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:yellow; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:blue; border-right: solid; border-left: blank;"  ></td>

<td style="background-color:red; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:pink; border-right: solid; border-left: blank;"  ></td>

</tr>
</table>

ただし、セル間に表示されるテーブルの背景がまだあるため、これではまだ十分ではありません。どうすればそれを利用できますか？

4

3 に答える 3

2

テーブルにクラスを与える

<table class="myTable">
    <!-- Your Rows/Cells -->
</table>

次に、CSS を使用して次の操作を行います。

.myTable { 
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0; 
    padding: 0; 
}

もborder:blank正しくありませんborder:none。代わりに使用してください。

于 2011-07-10T16:26:41.957 に答える
1 
<style type='text/css'>
#left{
border-left:none;
}
#right{
border-right:none;
}
#both{
border-left:none;
border-right:none;
}
</style>

これらの CSS ID<td>を table の要素に含めます。例： <table border=1> <tr> <td>1111</td> <td id='right'>2222</td> <td id='both'>3333</td> <td id='left'>4444</td> </tr> </table>

于 2011-07-10T16:36:03.923 に答える
0 
<td colspan="5" style="background-color:white; border-right: none; border-left: solid;">foo</td>
<td colspan="2"  style="background-color:red; border-right: solid; border-left: none;">foo</td>

デモ "

于 2011-07-10T16:30:11.143 に答える