Пунктирная разделительная строка в таблице

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

<table> 
    <tr> 
     <td></td> 
     <td style="border-bottom: 1px dotted #000;">foo</td> 
     <td style="border-bottom: 1px dotted #000;">bar</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td style="border-bottom: 1px dotted #000;">foo</td> 
     <td style="border-bottom: 1px dotted #000;">bar</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td style="border-bottom: 1px dotted #000;">foo</td> 
     <td style="border-bottom: 1px dotted #000;">bar</td> 
     <td></td> 
    </tr> 
</table>

Как вы можете видеть на изображении или here, существует разрыв между двумя клеточными линиями. Есть ли способ решить эту проблему без добавления строки с colspan между каждой строкой?

enter image description here

источник

2014-11-19 Johan

Попробуйте добавить 'table {border-collapse: collapse;} '- [fiddle] (http://jsfiddle.net/5wo2yyam/1/) – Vucko

@ Vucko Спасибо, но не повезло – Johan

Да это можно сделать, используя следующий CSS свойство: border-collapse: collapse;

Вот JSFiddle, который демонстрирует это: http://jsfiddle.net/pwee167/5wo2yyam/2/

Это должно выглядеть как на картинке ниже:

enter image description here

источник

2014-11-19 23:21:08

Выходит то же самое в последнем Chrome – Johan

Да, на самом деле я запускаю последний хром, и он работает. –

Вы заметили большую точку посередине? Это проблема – Johan

<table cellspacing="0">

Должно делать обе пунктирные линии непрерывными. Тем не менее, то, как точка окрашивается браузером, выглядит последней точкой, немного большей, чем остальная. Это происходит потому, что последняя точка первого пунктирного столбца находится рядом с первой точкой второго точечного столбца. Простыми словами, пунктирная линия не заканчивается и не начинается с пространства между точками, а с точкой.

источник

2014-11-19 23:21:24 Verhaeren

<table style="border-collapse:collapse;padding:0;margin:0;">

Это, вероятно, будет лучшее, что вы можете получить здесь ... есть еще немного визуального разрыва, как это выглядит, как будто граница проводится, начиная с каждой ячейкой (так как они соединены, зависит от где пунктирная линия заканчивается на предыдущей ячейке. Вы также можете поэкспериментировать с <tr style="border-bottom: 1px dotted #000;"> (и оставьте стили на <td>) ... хотя это похоже на тот же результат.

источник

2014-11-19 23:26:52 dhc

Пунктирная разделительная строка в таблице

ответ

Смежные вопросы