Подчеркивание строки таблицы

262
30 мая 2018, 23:40

Как на картинке ниже. Нужно сделать чтобы линия была по середине. Пока сделал через border-bottom, возможно ли его как-то позиционировать или нужен другой способ?

table { 
  width: 100%; 
} 
 
td.option { 
  width: 50%; 
  border-bottom: 1px dotted #000; 
}
<table> 
  <tbody> 
    <tr> 
      <td class="option">Ширина</td> 
      <td>40см</td> 
    </tr> 
  </tbody> 
</table>

Answer 1

table { 
  width: 100%; 
} 
 
td.option { 
 width: 5%; 
} 
#dots { 
  border-bottom: 1px dotted #000; 
  width: 90%; 
  position: relative; 
  top: -10px; 
}
<table> 
  <tbody> 
    <tr> 
      <td class="option">Ширина 
        <td id="dots"></td> 
      </td> 
      <td>40см</td> 
    </tr> 
  </tbody> 
</table>

Answer 2

Источник: How to add dotted line after text?

table { 
  width: 100%; 
} 
 
td.option { 
  display: flex; 
} 
td.option:after { 
  position: relative; 
  bottom: 7px; 
  margin-left: 5px; 
  border-bottom: 1px dotted black; 
  content: ''; 
  flex: 1; 
}
<table> 
  <tbody> 
    <tr> 
      <td class="option">Ширина</td> 
      <td>40см</td> 
    </tr> 
  </tbody> 
</table>

READ ALSO
Нельзя изменить CSS стили в консоли
HTML

Нельзя изменить CSS стили в консоли

на странице в консоли стили отображаются на сером фоне и в консоли их нельзя изменять, ничего типа livereload не подключено, с чем может быть связана...

 178
Добавить текст в поле textarea
HTML

Добавить текст в поле textarea

Есть обычное поле для ввода текста:

 252
кроссбраузерная верстка (opera, firefox)
HTML

кроссбраузерная верстка (opera, firefox)

 200
Как сверстать вот такой элемент
HTML

Как сверстать вот такой элемент

Как можно сверстать такой элемент фотографиина Bootstrap?

 188