Двойная пунктирная рамка при использовании colspan

У меня есть то, что кажется простой проблемой, но поиск в сети не дал никаких результатов.

У меня есть таблица

<table>
    <tr>
        <td colspan="3">
            <img src="something.png" />
        </td>
    </tr>
    <tr>
        <td>
            Hello
        </td>
        <td>
            World
        </td>
        <td>
            !
        </td>
    </tr>
</table>

Элементы <tr> имеют border-top: dotted 1px black, это отлично работает, кроме центрального элемента <td> во втором <tr>.

Этот элемент имеет двойную границу и поэтому отображается как сплошная строка, удаление colspan устраняет проблему.

Я попытался применить border-collapse: collapse к таблице, и это не сработало, я попытался добавить контент в форме &nbsp; внутри первого <td> вместо изображения, и это не сработало.

Любые идеи кто-нибудь?

Ответы

Ответ 1

Добавление border-collapse: separate; в вашу таблицу устраняет проблему, см. http://jsfiddle.net/quyMy/

Я добавил динамический тестовый пример для этой скрипки. Щелкните в любом месте, и видимость исходной/новой таблицы переключится, что позволит вам увидеть разницу намного проще.

Другой способ избавиться от неожиданной границы - добавить простой <tr></tr> после строки, содержащей <td colspan=3>.

Ответ 2

Если вы установите границу в ячейках таблицы вместо строк таблицы, она будет работать.

Я мог только воспроизвести ошибку в IE, но есть и другие известные проблемы с тем, как таблицы в IE отображают границы.

Смотрите это: http://jsfiddle.net/yePHg/19/

Ответ 3

Добавьте строку с символом < hr/" > между ними, а затем дайте границу этому hr

http://jsfiddle.net/Y5Gec/

Ответ 4

Попробуйте применить css display: block; в tr:   

    tr
    {
        border-top: 1px dotted #000;
        display: block;
    }

Ответ 5

Попробуйте добавить этот css:

<style>
table, table * { border:0; padding:0; margin:0 }
table td { border-top:1px dotted #000 }
</style>

Ответ 6

Я попал в эту же проблему!

border-collapse: separate

отлично поработал, но он также разделил мои границы (шокер, правда?). Мне нужна была одна пунктирная линия. Итак, вот что я сделал.

CSS

td {
border-right: 1px dotted #bbb;
border-left: 1px dotted #bbb;
border-bottom: 1px dotted #bbb;
border-top: none;
padding: .5em;
}

th {
border-right: 1px dotted #bbb;
border-left: 1px dotted #bbb;
border-top: 1px dotted #bbb;
border-top: 1px solid #bbb;
padding: .5em;
}

HTML

<table border="1">
    <tr>
        <th colspan="5"> DRESSES &amp; TOPS </th>
    </tr>
    <tr>
        <td> size </td>
        <td> numerical </td>
        <td> bust </td>
        <td> waist </td>
        <td> hip< </td>
    </tr>
</table>