Двойная пунктирная граница при использовании 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, и это все еще проблема. не уверен, что это ошибка в хроме, но похоже на нее   -  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 /> между ними, а затем укажите границу для этого часа.

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