Text decoration underline отступ от текста: Увеличение отступа от линии подчеркивания в css

Содержание

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

table — Подчеркивание css до конца td, но не под текстом — Stack Overflow на русском

Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.

Присоединиться к сообществу

Любой может задать вопрос

Любой может ответить

Лучшие ответы получают голоса и поднимаются наверх

Вопрос задан

Просмотрен 132 раза

На этот вопрос уже дан ответ здесь:

Закрыт 1 год назад.

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

задан 5 мар ’20 в 10:49

2

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

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>
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован.

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.