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>

在表格的<td>元素中包含这些css ID。例： <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>

使HTML表格的几个单元格显示为连接而不是这样

3 个答案:

Demo »