gpt4 book ai didi

html - html 表格中意外的边框间距

转载 作者:行者123 更新时间:2023-11-28 00:07:19 25 4
gpt4 key购买 nike

我能够看到表格中单元格之间的边框,请引用下图,您将能够看到背景颜色。我在 Ipad 和 Andriod tab 等移动设备上观察到这种行为

Table over the yellow background

Same table over the blue background

将上面的页面保存为 index.html 如果你使用的是 chrome 那么 1.打开调试工具 2.列表项 3.点击切换设备工具栏 4.选择IPAD,放大玩,你就能看到区别

<html>
<head>
sdfsdf
</head>
<body style="background: #c5c3c8;">
<style>
#root-GA-1-GA-1 .objbox table tbody tr.odd_material td {
background: #3b3f45 ;
color : #ffffff;
}
#root-GA-1-GA-1 .objbox table tbody tr.ev_material td {
background: #2e3135 ;
color : #ffffff;
}
</style>
<div id="root-GA-1-GA-1" style="width: 980px; height: 1271px; cursor: default;">
<div class="objbox" >
<table cellpadding="0" cellspacing="0" class="obj" style="width: 980px; table-layout: fixed;">
<tbody>
<tr class=" ev_material" style="height: 50px;">
<td align="left" valign="middle" class="cell_style0 ">K1</td>
<td align="left" valign="middle" class="cell_style0 ">AA</td>
</tr>
<tr class=" odd_material" style="height: 50px;">
<td align="left" valign="middle" class="cell_style0 ">K2</td>
<td align="left" valign="middle" class="cell_style0 ">AB</td>
</tr>
<tr class=" ev_material" style="height: 50px;">
<td align="left" valign="middle" class="cell_style0 ">K3</td>
<td align="left" valign="middle" class="cell_style0 ">AC</td>
</tr>
<tr class=" odd_material" style="height: 50px;">
<td align="left" valign="middle" class="cell_style0 ">K23</td>
<td align="left" valign="middle" class="cell_style0 ">AaC</td>
</tr>
<tr class=" ev_material" style="height: 50px;">
<td align="left" valign="middle" class="cell_style0 ">K334</td>
<td align="left" valign="middle" class="cell_style0 ">ACa</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

关于如何摆脱这些奇怪的线条有什么想法吗?

最佳答案

理想情况下,您应该真正将 HTML 代码与 CSS 一起提供,这有助于确定 HTML 中是否存在错误。

但是如果你使用 <table>标记,您还应该添加 cellspacing="0" cellpadding="0"

所以你的 <table>标记应如下所示:

<table cellspacing="0" cellpadding="0">

编辑:

另外值得一提的是 CSS 重置,因为不同的浏览器和设备呈现的内容略有不同。以下重置为 <table>它的 child 应该工作,然后你可以删除 cellspacing="0" cellpadding="0"来自 <table>标签。

table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}

关于html - html 表格中意外的边框间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55628063/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com