[Vuejs]-What is the best way to style a vertical table with split background

by

0👍

that layout of yours (if that’s what you want right?), you need to collapse your table border for that, to avoid white gaps. add a special class for tr that represents the thead and style it accordingly. follow the pattern with <tr><th></th><td></td></tr>. use text-align to center them with right to th and left to 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>

Leave a comment