Как лучше всего оформить вертикальный стол с разделенным фоном - PullRequest
Новая
       4

Как лучше всего оформить вертикальный стол с разделенным фоном

0 голосов
/ 29 мая 2020

Как мне организовать и стилизовать эти данные на разделенном фоне, используя css и html?

enter image description here

1 Ответ

0 голосов
/ 29 мая 2020

этого макета (если вы этого хотите, верно?), Вам нужно свернуть границу таблицы для этого, чтобы избежать белых пробелов. добавьте специальный класс для tr, представляющий thead, и задайте для него соответствующий стиль. следуйте шаблону с <tr><th></th><td></td></tr>. используйте выравнивание текста, чтобы центрировать их справа от th и слева до td. 

td, th {
  padding: 8px;
  font-size: 12px;
  width: 250px;
}

th { background: #E9EADA; text-align: right; }
td { background: #FCFCFC; text-align: left; }

.table-header > * {
  font-size: 16px;
  color: #238E98;
}

table { border-collapse: collapse; }
<table>
  <tr>
    <th>First name</th>
    <td>John</td>
  </tr>
  <tr>
    <th>Last Name</th>
    <td>Doe</td>
  </tr>
  <tr class="table-header">
    <th>Details</th>
    <td>---</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>33</td>
  </tr>
</table>
...