html - 使 HTML 表格的多个单元格看起来没有连接

Question

我有一个 html 表格，我需要让几个单元格看起来加入，而不是实际加入。这是因为每个单元格必须有不同的背景。

所以我需要从最左边的单元格中去掉右边框；从最右边的单元格中删除左边框；从中央单元格中删除两个边界。

这是一个示例，其中我有一个包含两行和 7 个单元格的表格。在第二行中，单元格应显示为只有 2 个单元格。一个跨越 5 列，一个跨越 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>

但这仍然不够，因为在单元格之间仍然显示了表格的一些背景。我该怎么做？

Answer 1

给你的桌子上课

<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改用。

Answer 2

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

Answer 3

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

演示 »