Chrome 1px неизбежно Расстояние между тд - PullRequest
4 голосов
/ 12 сентября 2011

У меня проблема, которая возникает только в Chrome и больше нигде.У меня есть таблица, к которой применяется стиль при наведении.В других браузерах стиль применяется при наведении курсора на любую часть строки.Однако в chrome, на краю каждого тд, стиль больше не применяется.Если я «проверяю элемент» в этой небольшой области шириной 1 пиксель между ячейками, панель элементов показывает, что Chrome считает, что я нахожусь внутри таблицы, но не внутри самой строки.Вот некоторый код, который производит этот эффект:

CSS:

table.tablesorter tbody tr:hover {
    background: #8dbdd8;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
}

HTML:

    <table id="myTable" class="tablesorter"> 
        <thead> 
            <tr> 
                <th>Title1</th> 
                <th>Title2</th> 
                <th>Title3</th> 
            </tr> 
        </thead> 
        <tbody>
            <tr> 
                <td>Bach</td> 
                <td>42526</td> 
                <td>Dec 10, 2002 5:14 AM</td> 
            </tr> 
            <tr> 
                <td>Doe</td> 
                <td>243155</td> 
                <td>Jan 18, 2007 9:12 AM</td> 
            </tr> 
            <tr> 
                <td>Conway</td> 
                <td>35263</td>
                <td>Jan 18, 2001 9:12 AM</td> 
            </tr> 
        </tbody> 
    </table>

Кто-нибудь видел это раньше / знает способ обойти это?

Если это поможет, я использую Chrome 13.0.782.220.

Демонстрационная версия: http://jsfiddle.net/yNPtU/

Ответы [ 4 ]

2 голосов
/ 12 сентября 2011

Интересно, что это не вызвано границей.Если вы установите ширину границы в 10px, между ячейками останется только 1px, что вызывает это.

Я попытался установить положение tds, которое, казалось, работало.Вот демо: http://jsfiddle.net/lnrb0b/6harr/

Примечание: Я добавил отступы, чтобы размер был постоянным

0 голосов
/ 12 апреля 2016

По умолчанию в таблице есть cellpadding и cellspacing. Вам нужно будет добавить:

<table cellspacing="0" cellpadding="0">
0 голосов
/ 23 августа 2012

Как уже упоминалось в этот вопрос , это решит его:

td {
    padding: 2px 5px;
    position:relative;
}

И JsFiddle .

0 голосов
/ 12 сентября 2011

Give интервал границы: -1px в css.

...