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

Question

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

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

<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 к таблице, и это не сработало, я попытался добавить содержимое в виде   внутри первого <td> вместо изображения, и это не 'Т тоже работал.

Есть идеи у кого-нибудь?

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

Добавить строку смежду, а затем дать границу этому часу

http://jsfiddle.net/Y5Gec/

Answer 4

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

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

Answer 5

Я столкнулся с той же проблемой!

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>

Answer 6

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

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