使 HTML 表格的多个单元格看起来连接在一起，但实际上并没有连接在一起

发布于 2024-11-19 16:59:59 字数 1198 浏览 1 评论 0原文

我有一个 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>

但这仍然不够，因为单元格之间仍然显示表格的一些背景。我该如何看待这一点？

原文

I have a table in html and I need to make several cells appear joined, without being actually joined. This because each cell must have a different background.

So I need to take away the right border from the left most cell;
take away the left border from the right most cells;
take away both border from the central cells.

Here is an example where I have a table with two rows, and 7 cells. In the second row, the cells should appear as being only 2 cells. One spanning 5 columns and one spanning 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>

But then this is still not enough because there is still some background of the table that is shown between the cells. How do I take of that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扭转时空 2024-11-26 17:00:00

为您的表格指定一个类

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

Give your table a class

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

Then with CSS do the following:

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

Also border:blank is incorrect, use border:none instead.

回复收藏 0 原文

恰似旧人归 2024-11-26 17:00:00

<style type='text/css'>
#left{
border-left:none;
}
#right{
border-right:none;
}
#both{
border-left:none;
border-right:none;
}
</style>

将这些 css id 包含在表的元素中。
例子：
<表格边框=1>;

<style type='text/css'>
#left{
border-left:none;
}
#right{
border-right:none;
}
#both{
border-left:none;
border-right:none;
}
</style>

include these css ids in <td> elements of table.
example:
<table border=1> <tr> <td>1111</td> <td id='right'>2222</td> <td id='both'>3333</td> <td id='left'>4444</td> </tr> </table>

回复收藏 0 原文

幻想少年梦 2024-11-26 17:00:00

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

演示 »

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