Question

我能够看到表格中单元格之间的边界，请参见下面的图像，您将能够看到背景色。我在Ipad和Andriod标签等移动设备上观察到了这种行为

将以上页面另存为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>

关于如何摆脱这些怪异路线的任何想法？

Answer 1

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

但是，如果您使用的是<table>标签，则还应该添加cellspacing="0" cellpadding="0"

因此，您的<table>标签应如下所示：

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

编辑：

还值得一提的是CSS重置，因为不同的浏览器和设备呈现的渲染稍有不同。以下重置为<table>，并且它的子级应该正常工作，然后您可以从cellspacing="0" cellpadding="0"标记中删除<table>。

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

HTML表格中的边框间距意外

1 个答案: