Неоднородная пунктирная граница в ячейках таблицы - PullRequest
Новая
       53

Неоднородная пунктирная граница в ячейках таблицы

11 голосов
/ 20 марта 2012

Я применил CSS border-bottom:1px dashed #494949; к нескольким последовательным ячейкам одной строки таблицы HTML, но граница не является равномерной.Черточки в конце каждой ячейки появляются немного длиннее.Пунктирная граница также не является равномерной.Я также использую border-collapse:collapse;

Вот снимок экрана:

enter image description here

Есть ли способ получить равномерную пунктирную границу?

Ответы [ 4 ]

2 голосов
/ 20 марта 2012

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

table { border-collapse: collapse; }
td { padding: 0; }
tr { border-bottom:1px dashed #494949; }

Но в IE 9 (при соединении ячеек) это все равно не работает, и старые браузеры игнорируют границы, установленные для строк таблицы.

Попробуйте вместо этого использовать сплошную серую рамку. Он работает последовательно и может быть визуально приемлемым, может быть, даже лучше.

1 голос
/ 20 марта 2012

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

В этом случае попытайтесь поместить границу на весь ряд вместо отдельных ячеек.

0 голосов
/ 20 марта 2012

Лучше всего в этом случае создать повторяющийся файл изображения, высота которого равна высоте строки таблицы.Установите его в качестве фона таблицы и убедитесь, что он повторяется.Я проверил это, и это работает.Обратите внимание, что в файле PNG, созданном для этого примера, каждая черта имеет длину 3 пикселя, а справа есть три пустых конечных пикселя для конечных размеров 30 пикселей (ширина) x 29 пикселей (высота).

Воткод: 

.borderTable {
  background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png);
  background-repeat: repeat;
}

.borderTable td {
  height: 29px;
}
<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0">
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
0 голосов
/ 20 марта 2012

Я не уверен, но это похоже на проблему рендеринга. Даже использование background-image вместо border-bottom будет иметь такую ​​же проблему.

...