Question

在移动设备上查看时，即使边框设置为0px，td class="pos-nochange"周围也会有边框。有一点我不明白为什么当用户在他们的移动设备上放大（缩放更大）时，边框会变大或变小（看起来很不固定）？

<table style="font-family: Open Sans; font-size:12px; border:0px">
    <tbody>
        <tr>
            <td style="background-color: #44445e;" colspan="5" width="300">
                <div id="mleaguetable"></div>
                <div class="live"><span style="font-size:15px">LIVE</span>
                </div>
            </td>
        </tr>
        <tr>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" colspan="2" height="30"><strong><span style="color: #828293;">Pos</span></strong>
            </th>
            <th style="background-color: #050528; text-align: left; vertical-align: middle;" width="155"><strong><span style="color: #828293; padding: 0 0 0 5px;">Club</span></strong>
            </th>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" width="50"><strong><span style="color: #828293;">Pld</span></strong>
            </th>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" width="50"><strong><span style="color: #828293;">Pts</span></strong>
            </th>
        </tr>
        <tr>
            <td style="background-color: #51516d; vertical-align: middle; text-align: right;" width="30" height="30"><span style="color: #ffffff;">1</span>
            </td>
            <td class="pos-nochange" style="background-color: #51516d;"></td>
            <td style="background-color: #51516d; border-right: 1px solid #44445E;"><span style="color: #ffffff; padding: 0 0 0 5px;"><a href="/en-gb/clubs/profile.overview.html/arsenal"><span style="color: #ffffff;">Utd For Utd</span>
                </a>
                </span>
            </td>
            <td style="background-color: #51516d; text-align: center; border-right: 1px solid #44445E;"><span style="color: #ffffff;">5</span>
            </td>
            <td style="background-color: #51516d; text-align: center;"><strong><span style="color: #ffffff;">13</span></strong>
            </td>
        </tr>...</tbody>
</table>

Answer 1

使用border-collapse样式规则：

table
{
   border-collapse:collapse;
}

Fiddle Demo

Answer 2

将内联属性border=""添加到表格。

在移动设备上的td边框

2 个答案: