Как сделать автоматическое заполнение пустого пространства в характеристиках?

Question

Как сделать чтоб вместо пустого пространства после названия характеристики отображалась такая серая линия

Answer 1

Можно всё пространство в левых строках заполнять серой линией, а текст с белым фоном накладывать поверх неё - визуально будет казаться, что заполнено только пустое пространство:

table {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-collapse: collapse;
}
td {
  padding: 5px;
  position: relative;
}
td:first-child:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  right: 0;
  margin: auto;
  height: 1px;
  background-color: silver;
}
span {
  position: relative;
  padding: 5px;
  background-color: white;
}

<table>
  <tr>
    <td><span>Рабочее поле</span></td>
    <td>900x600мм</td>
  </tr>
  <tr>
    <td><span>Мощность лазерной трубки</span></td>
    <td>80-90 Вт</td>
  </tr>
  <tr>
  <td><span>Система управления</span></td>
    <td>Ruida RDC6442G</td>
  </tr>
</table>

БЛОГ НА HUSL

Как сделать автоматическое заполнение пустого пространства в характеристиках?

Ответы (1 шт):