Подчеркивание css до конца td, но не под текстом

Question

Другими словами, мне нужно как-то реализовать то, что на картинке

Answer 1

Вижу решение так (попробуйте изменить размер таблицы - правый нижний угол):

body { height: 100vh; margin: 0; }

table {
  border: 1px solid red;
  /* Для интерактивного изменения размера таблицы. Необязательно. */
  overflow: hidden;
  resize: both;
}
td {
  padding: 5px;
  vertical-align: bottom;
  /* Запрет переноса названий и значений характеристик на новую строку */
  white-space: pre;
}
td:first-child {
  position: relative;
  width: 100%;
  overflow: hidden;
  vertical-align: bottom;
  /* Если нужен перенос названий характеристик на новую строку */
  white-space: pre-wrap;
}
td:first-child::after {
  content: '';
  position: absolute;
  bottom: 8px;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid #080;
  /* Отступ линии от названий характеристик*/
  margin-left: 6px;
}
td:last-child {
  /* Отступ линии от значений характеристик */
  padding-left: 5px;
}

<table>
  <tr><td>Макс. грузоподъемность</td><td>400 т</td></tr>
  <tr><td>Стрела</td><td>15 м - 60 м</td></tr>
  <tr><td>Удлинение стрелы</td><td>5.5 м - 78.5 м</td></tr>
</table>

Answer 2

Вот например, одно из решений (можно оптимизировать, но суть ясна) на codepen.io также html и scss ниже:

upd: сначала написал верстку на div'ах, не заметил, что про td спрашивают. Добавил для td решение.

.parent {
  width: 500px;
  
  .item {
display: flex;

&>div {
  margin: 1px;
  padding: 1px;
  white-space: nowrap;
}
  }
  
  .name {
flex: 2;
display: flex;

&:after {
  content: '';
  display: block;
  width:100%;
  margin-left: 10px;
  border-bottom:1px dotted #000;
}
  }
  .value {
flex: 1;
  }
}

table {
  width: 500px;
  
  
  td:first-child {
display: flex;
white-space:nowrap;
&:after {
  content: '';
  display: block;
  width:100%;
  border-bottom:1px dotted #000;
}
  }
}

<div class="parent">
  <div class="item">
<div class="name">Макс. грузоподъемность</div>
<div class="value">15m</div>
  </div>
  <div class="item">
<div class="name">Стрела</div>
<div class="value">15m</div>
  </div>
</div>
<hr />
<table>
  <tr>
<td>Макс. грузоподъемность</td>
<td>15m</td>
  </tr>
  <tr>
<td>Стрела</td>
<td>15m</td>
  </tr>
</table>

БЛОГ НА HUSL

Подчеркивание css до конца td, но не под текстом

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