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

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

Вот скриншот:

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

Я решил эту проблему в своем приложении, добавив дополнительную строку с тем же colspan, что и строка с пунктирной рамкой. Граница будет равномерной по длине пролета:

<table>
    <!--row with dashed border-->
      <tr>
          <td style = "border-bottom: 1px dashed green;" colspan="3"></td>
      </tr>
    <!--added row so dotted border looks uniform-->
      <tr>
          <td style="height: 5px;" colspan="3"></td>
      </tr>
    <!--existing rows with lots of columns-->
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
</table>

Ответ 4

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

Ответ 5

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

Ответ 6

Ответ DIZAD (fooobar.com/info/478742/... почти сработал) почти сработал для меня, но добавление границ к тд все равно приводило к странным пунктирным границам. Добавление границы в div внутри td исправило это для меня.

const RowBorder = styled('div')'
  border-top: 1px dashed black;
  width: 100%;
';
return (
  <table>
    <thead>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td colSpan="2">Col5</td>
      </tr>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
    </thead>
    <tbody>{rows}</tbody>
  </table>
)