Как правильно верстать такую таблицу?

237

23 июля 2018, 03:30

Как правильно верстаются такие таблицы?

Первое, что приходит на ум, это сделать два блока

div { 
  display: inline-block; 
}

<div class="content-one"> 
  <p>lineline:</p> 
  <p>linelinelinelineline:</p> 
  <p>linelineline:</p> 
  <p>lineline:</p> 
  <p>lineline:</p> 
</div> 
<div class="content-two"> 
  <p>line</p> 
  <p>line</p> 
  <p>line</p> 
  <p>line</p> 
  <p>line</p> 
</div>

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

Answer 1

Чуть чуть фантазию включить и получится типа таблица

* { 
  margin: 0; 
  padding: 0; 
} 
 
P { 
  display: flex; 
  justify-content: space-between; 
  border-bottom: 1px dashed #000; 
  width: 90%; 
  margin: auto; 
  align-items: center; 
} 
 
span:first-child { 
  border-right: 1px dashed #000; 
  width: 50%; 
  text-transform: uppercase; 
  font-family: Arial; 
  font-weight: 900; 
} 
 
span:last-child { 
  text-transform: lowercase; 
  font-family: Arial; 
  font-weight: 100; 
}

<p><span>здесь что то </span><span>здесь цыфра</span></p> 
<p><span>здесь что то </span><span>здесь цыфра</span></p> 
<p><span>здесь что то </span><span>здесь цыфра</span></p>

второй пример , просто так сделал

* { 
  margin: 0; 
  padding: 0; 
} 
 
P { 
  display: flex; 
  justify-content: space-between; 
  width: 90%; 
  margin: auto; 
  align-items: center; 
  background: #fbfbfb; 
  padding: 2px; 
  margin-top: 10px; 
} 
 
span:first-child { 
  width: 50%; 
  text-transform: uppercase; 
  font-family: Arial; 
  font-weight: 900; 
} 
 
span:last-child { 
  text-transform: lowercase; 
  font-family: Arial; 
  font-weight: 100; 
  display: flex; 
  flex-direction: column; 
  width: 50%; 
  text-align: right; 
  height: 100% 
} 
 
span:last-child i { 
  display: block; 
  width: 100%; 
} 
 
span:last-child i:first-child { 
  border-bottom: 1px dashed #000; 
} 
 
i:nth-child(2) { 
  border-bottom: 1px dashed #000; 
} 
 
i:last-child { 
  border-bottom: none; 
}

<p> 
  <span>здесь что то </span> 
  <span> 
<i>здесь цыфра</i> 
<i>здесь тоже что то</i> 
</span> 
</p> 
 
<p> 
  <span>какая то канитель</span> 
  <span> 
  <i>тут что то</i> 
  <i>и тут какая то лажа</i> 
  <i>и здесь хрень</i> 
</span> 
</p>

Answer 2

Табличные данные стоит верстать, как ни странно, таблицами. Заголовки помечать тегом <th>, а ячейку с данными — <td>.

<table> 
  <tr> 
    <th>Weight</th> 
    <td>20</td> 
  </tr> 
  <tr> 
    <th>Volume</th> 
    <td>50</td> 
  </tr> 
</table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать выдвижной футер?

Никак не могу реализовать такой же футер, как на этом сайте (http://ritgru/)

190

HTML

Почему не работает событие onchange?

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

222

HTML

Как правильно использовать Emmet?

Как мне сразу развернуть сниппет со значением в src?

194

jQuery

Не получается отправить запрос на сайт

Ошибка:

228