JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div>
<table>
  <colgroup>
    <col>
    <col width="20%">
    <col width="20%">
  </colgroup>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class="foo" colspan="3"></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
</div>

SCSS

div {
  padding: 30px;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 100%;
  max-width: 920px;
}
td:first-child {
  padding-left: 0;
}
td {
  padding-left: 30px;
}
tr:not(:first-child) {
  border-top: 15px solid beige;
}

/*.foo {
  border-top: 1px dashed firebrick;
}*/


















/* La déco */
div {
    max-width: 990px;
    margin: 0 auto;
    background: beige;
}
td:first-child {
  // background-color: lightblue;
}

td:nth-child(2) {
  border-left: 1px dashed firebrick;
  // background-color: lightpink;
}

td:nth-child(3) {
  // background-color: lightgreen;
}