问题描述:

I have tried to make my table look like this:

Everything looks great so far, however I am having trouble with my border-spacing, there isn't any for some reason, as shown here:

So far I have border-spacing in my css, however it isn't doing anything and I am not sure as to why that is.

HTML:

<section class="s">

<center>

<table class="t">

<caption class="ex2">HTML Table with CSS</caption>

<tr>

<td class="r1c1">This</td>

<td class="r1c2">Little</td>

<td class="r1c3">Piggy</td>

<td class="r1c4">Went</td>

<td class="r1c5">To</td>

<td class="r1c6">Market</td>

</tr>

<tr>

<td class="r2c1" colspan="2">This</td>

<td class="r2c2">Little</td>

<td class="r2c3">Piggy</td>

<td class="r2c4">Went</td>

<td class="r2c5">To</td>

</tr>

<tr>

<td class="r3c1" colspan="2" rowspan="2">This</td>

<td class="r3c2" rowspan="2">Little</td>

<td class="r3c3">Piggy</td>

<td class="r3c5" rowspan="2">To</td>

<td class="r3c6" rowspan="2">Market</td>

</tr>

<tr>

<td class="r3c4">Went</td>

</tr>

<tr>

<td class="r4c1">Little</td>

<td class="r4c2">Piggy</td>

<td class="r4c4">Went</td>

<td class="r4c5">To</td>

<td class="r4c5" colspan="2">Market</td>

</tr>

</table>

</center>

</section>

CSS:

table.t

{

border: 1px solid;

border-spacing: 30px;

text-align: center;

}

td.r1c1 { border: 1px solid; background-color: #6DFFA8; }

td.r1c2 { border: 1px solid; background-color: #6DFFCC; }

td.r1c3 { border: 1px solid; background-color: #6DFFFF; }

td.r1c4 { border: 1px solid; background-color: #70E8FF; }

td.r1c5 { border: 1px solid; background-color: #74CEFF; }

td.r1c6 { border: 1px solid; background-color: #78BAFF; }

td.r2c1 { border: 1px solid; background-color: #6DFFA8; }

td.r2c2 { border: 1px solid; background-color: #33FAB4; }

td.r2c3 { border: 1px solid; background-color: #33F9D8; }

td.r2c4 { border: 1px solid; background-color: #34F0F9; }

td.r2c5 { border: 1px solid; background-color: #3CBCF9; }

td.r3c1 { border: 1px solid; background-color: #6DFFA8; }

td.r3c2 { border: 1px solid; background-color: #00F9F9; }

td.r3c3 { border: 1px solid; background-color: #1094FA; }

td.r3c4 { border: 1px solid; background-color: #1A5EFA; }

td.r3c5 { border: 1px solid; background-color: #242AFA; }

td.r3c6 { border: 1px solid; background-color: #511CFA; }

td.r4c1 { border: 1px solid; background-color: #6DFFA8; }

td.r4c2 { border: 1px solid; background-color: #00D67B; }

td.r4c3 { border: 1px solid; background-color: #00CBCB; }

td.r4c4 { border: 1px solid; background-color: #0E7CD1; }

td.r4c5 { border: 1px solid; background-color: #1750D4; }

网友答案:

The table rule is missing border-collapse:separate; for border-spacing to work properly

table.t
{
    border-collapse:separate;
}
相关阅读:
Top