Двойна пунктирана рамка при използване на 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> вместо изображение и това също не проработи.

Някой има ли идеи?


html css border html-table
person Jake N    schedule 11.10.2011    source източник
comment
таблицата също има ли граница? опитайте да зададете граница на таблицата като нито една.   -  person Punit    schedule 11.10.2011
comment
<table> няма граници, а <td> нямат граници.   -  person Jake N    schedule 11.10.2011
comment
В кой браузър(и) виждате това? Не го получавам в jsfiddle, изпълняващ Firefox 7.0.1: jsfiddle.net/yePHg   -  person Pat    schedule 11.10.2011
comment
Chrome 14.0, току-що пробван във Firefox 7.0.1 и работи добре за мен. И двете на Mac OS X.   -  person Jake N    schedule 11.10.2011
comment
Можете ли да публикувате пълния CSS/HTML, който използвате за това, вместо само фрагмента?   -  person JoshDM    schedule 21.10.2011
comment
Бих, но има огромен лист със стилове, освен това е в зоната за регистриране на сайта. Това е най-доброто, което мога да осигуря.   -  person Jake N    schedule 28.10.2011
comment
2019 г. и това все още е проблем. не съм сигурен дали е грешка в chrome, но със сигурност изглежда като такава   -  person billynoah    schedule 03.07.2019

Отговори (5)


arrow_upward
25
arrow_downward

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

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

Друг начин да се отървете от неочакваната граница е да добавите обикновен <tr></tr> след реда, съдържащ <td colspan=3>.

person Rob W    schedule 22.10.2011
comment
Все още няма солиден отговор Роб У. И така, вие печелите! - person Jake N; 11.05.2012
comment
това ми спести няколко цикъла. Благодаря! - person Hcabnettek; 27.02.2014

arrow_upward
3
arrow_downward

Ако зададете граница на клетките на таблицата вместо на редовете на таблицата, ще работи.

Бих могъл да възпроизведа грешката само в IE, но има други известни проблеми с начина, по който таблиците в IE изобразяват граници.

Вижте това: http://jsfiddle.net/yePHg/19/

person Victor    schedule 12.10.2011
comment
Благодаря Виктор, сигурен съм, че съм пробвал това. пак ще опитам - person Jake N; 13.10.2011

arrow_upward
2
arrow_downward

Добавете ред с ‹hr /> между тях и след това дайте граница на този hr

http://jsfiddle.net/Y5Gec/

person yunzen    schedule 27.10.2011
comment
гласуваха за уважаваната корекция извън кутията. Интересен подход. - person Hcabnettek; 27.02.2014

arrow_upward
0
arrow_downward

Опитайте да добавите този css:

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

arrow_upward
0
arrow_downward

Срещнах същия проблем!

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>
person renée    schedule 13.06.2012