В Chrome тд граница-нижнее перекрытие

Question

В Chrome и Safari TD границы перекрывают другие. Я использую CSS

.basketTable tr td {
    background-color: #FFFFFF;
    border-top: 1px dotted #666666;
    color: #333333;
    padding: 18px 9px 5px 0;
    text-align: left;
    vertical-align: top;
}

Совершенно невежественны. Я уверен, что кто-то должен был столкнуться с той же проблемой, пожалуйста, предложите.

CSS:

.basketTable{ border-collapse:collapse;}
.basketTable th {
    padding:5px 10px 5px 0;
    border-top:4px solid #666;
}
.basketTable tr td {
    background-color: #fff;
    border-top: 1px dotted #666;
    padding:18px 9px 5px 0;
    text-align:left;
    color:#333;
    vertical-align:top;
}

HTML:

<table width="500px" border="0" class="basketTable" summary="table">
        <thead>
            <tr>
                <th class="productCol">Produkt</th>
                    <th class="articleCol">Art.nr.</th>
                <th class="quantityCol">Antal</th>
                <th class="unitPrice">Pris per styck</th>
                <th class="totalPrice">Totalt</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="/alarms/baby_monitors/Pr362455"><img title="product" src="/medias/sys_master/8796144205854/36-2455_t.jpg" alt=""></a><p>Babytalker 1010 PMR Baby Monitor-Small</p></td>
                <td class="productCode">36-2455</td>
                <td><span class="quantity">1</span></td>
                <td><span class="price">5,84<span>(6,49)</span></span></td>
                <td colspan="4" class="last-child">5,84</td>
            </tr>
            <tr>
                <td><a href="/alarms/baby_monitors/Pr362455"><img title="product" src="/medias/sys_master/8796144205854/36-2455_t.jpg" alt=""></a><p>Babytalker 1010 PMR Baby Monitor-Small</p></td>
                <td class="productCode">36-2455</td>
                <td><span class="quantity">1</span></td>
                <td><span class="price">5,84<span>(6,49)</span></span></td>
                <td colspan="4" class="last-child">5,84</td>
            </tr>
        </tbody>
    </table>

Answer 1

Попробуйте table{border-collapse:separate;}.

Answer 2

Попробуйте td{overflow:hidden;}, он удаляет перекрывающиеся части за пределами границы.