CodePen Embed - Table Complicated border test

<h1>Bordered table</h1>
<h2>Example 1 using display:flex;</h2>
<table class="table-border">
  <tr>
    <td>a11</td>
    <td>a22</td>
    <td>a33</td>
  </tr>
  <tr>
    <td>b44</td>
    <td>b55</td>
    <td>b66</td>
  </tr>
  <tr>
    <td>c77</td>
    <td>c88</td>
    <td>c99</td>
  </tr>
  <tr>
    <td>d11</td>
    <td>d22</td>
    <td>d33</td>
  </tr>
  <tr>
    <td>e44</td>
    <td>e55</td>
    <td>e66</td>
  </tr>
  <tr>
    <td>f77</td>
    <td>f88</td>
    <td>f99</td>
  </tr>

  <tr>
    <td>g11</td>
    <td>g22</td>
    <td>g33</td>
  </tr>
  <tr>
    <td>h44</td>
    <td>h55</td>
    <td>h66</td>
  </tr>
  <tr>
    <td>i77</td>
    <td>i88</td>
    <td>i99</td>
  </tr>
  <tr>
    <td>j11</td>
    <td>j22</td>
    <td>j33</td>
  </tr>
  <tr>
    <td>k44</td>
    <td>k55</td>
    <td>k66</td>
  </tr>
  <tr>
    <td>l77</td>
    <td>l88</td>
    <td>l99</td>
  </tr>
</table>

<h2>Example 2: using :before to add borders to normal table</h2>
<table class="table-border2">
  <tr>
    <td>a11</td>
    <td>a22</td>
    <td>a33</td>
  </tr>
  <tr>
    <td>b44</td>
    <td>b55</td>
    <td>b66</td>
  </tr>
  <tr>
    <td>c77</td>
    <td>c88</td>
    <td>c99</td>
  </tr>
  <tr>
    <td>d11</td>
    <td>d22</td>
    <td>d33</td>
  </tr>
  <tr>
    <td>e44</td>
    <td>e55</td>
    <td>e66</td>
  </tr>
  <tr>
    <td>f77</td>
    <td>f88</td>
    <td>f99</td>
  </tr>
  <tr>
    <td>g11</td>
    <td>g22</td>
    <td>g33</td>
  </tr>
  <tr>
    <td>h44</td>
    <td>h55</td>
    <td>h66</td>
  </tr>
  <tr>
    <td>i77</td>
    <td>i88</td>
    <td>i99</td>
  </tr>
  <tr>
    <td>j11</td>
    <td>j22</td>
    <td>j33</td>
  </tr>
  <tr>
    <td>k44</td>
    <td>k55</td>
    <td>k66</td>
  </tr>
  <tr>
    <td>l77</td>
    <td>l88</td>
    <td>l99</td>
  </tr>
</table>

/* Example 1 */
.table-border {
  border: 1px solid red;
  width: 50%;
  min-width: 200px;
  padding: 5px 5px 10px;
  display: flex;
  flex-wrap: wrap;
}
.table-border tbody {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 100%;
  width: 100%;
}
.table-border tr {
  flex: 1 0 100%;
  width: 100%;
  display: flex;
}
.table-border td {
  border: 1px solid #000;
  border-bottom: none;
  border-top: none;
  padding: 10px;
  flex: 1 0 0%;
  width: 33.3%;
  margin: 0 5px;
}
.table-border tr:nth-child(3n + 1) td {
  border-top: 1px solid #000;
  margin-top: 10px;
}
.table-border tr:nth-child(3n + 3) td {
  border-bottom: 1px solid #000;
}

/* style blocks */
.table-border tr:nth-child(1) td:first-child,
.table-border tr:nth-child(2) td:first-child,
.table-border tr:nth-child(3) td:first-child {
  border-color: red;
  background: orange;
}
.table-border tr:nth-child(1) td:nth-child(2),
.table-border tr:nth-child(2) td:nth-child(2),
.table-border tr:nth-child(3) td:nth-child(2) {
  border-color: cyan;
  background: pink;
}
.table-border tr:nth-child(1) td:nth-child(3),
.table-border tr:nth-child(2) td:nth-child(3),
.table-border tr:nth-child(3) td:nth-child(3) {
  border-color: teal;
  background: yellow;
}

/* Second row of 3*/
.table-border tr:nth-child(4) td:first-child,
.table-border tr:nth-child(5) td:first-child,
.table-border tr:nth-child(6) td:first-child {
  border-color: blue;
  background: green;
}
.table-border tr:nth-child(4) td:nth-child(2),
.table-border tr:nth-child(5) td:nth-child(2),
.table-border tr:nth-child(6) td:nth-child(2) {
  border-color: orange;
  background: lime;
}
.table-border tr:nth-child(4) td:nth-child(3),
.table-border tr:nth-child(5) td:nth-child(3),
.table-border tr:nth-child(6) td:nth-child(3) {
  border-color: black;
  background: gray;
}

/* 3rd row */
.table-border tr:nth-child(7) td:first-child,
.table-border tr:nth-child(8) td:first-child,
.table-border tr:nth-child(9) td:first-child {
  border-color: red;
  background: orange;
}
.table-border tr:nth-child(7) td:nth-child(2),
.table-border tr:nth-child(8) td:nth-child(2),
.table-border tr:nth-child(9) td:nth-child(2) {
  border-color: cyan;
  background: pink;
}
.table-border tr:nth-child(7) td:nth-child(3),
.table-border tr:nth-child(8) td:nth-child(3),
.table-border tr:nth-child(9) td:nth-child(3) {
  border-color: teal;
  background: yellow;
}

/* last row of 3 */
.table-border tr:nth-child(10) td:first-child,
.table-border tr:nth-child(11) td:first-child,
.table-border tr:nth-child(12) td:first-child {
  border-color: blue;
  background: green;
}
.table-border tr:nth-child(10) td:nth-child(2),
.table-border tr:nth-child(11) td:nth-child(2),
.table-border tr:nth-child(12) td:nth-child(2) {
  border-color: orange;
  background: lime;
}
.table-border tr:nth-child(10) td:nth-child(3),
.table-border tr:nth-child(11) td:nth-child(3),
.table-border tr:nth-child(12) td:nth-child(3) {
  border-color: black;
  background: gray;
}

/* Example 2 */
.table-border2 {
  border: 1px solid red;
  width: 50%;
  min-width: 200px;
  padding: 5px;
  border-spacing: 5px;
}
.table-border2 td {
  border: 1px solid #000;
  border-bottom: none;
  border-top: none;
  padding: 10px 10px 5px;
  position: relative;
}
.table-border2 tr:nth-child(3n + 1) td {
  border-top: 1px solid #000;
}
.table-border2 tr:nth-child(3n + 3) td {
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}
.table-border2 td:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1px;
  right: -1px;
  top: 0;
  bottom: -5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-color: inherit;
  background: inherit;
}
.table-border2 tr:nth-child(3n + 3) td:before {
  bottom: 0;
}

/*now color each row differently*/
.table-border2 tr:nth-child(1) td:first-child,
.table-border2 tr:nth-child(2) td:first-child,
.table-border2 tr:nth-child(3) td:first-child {
  border-color: red;
  background: orange;
}
.table-border2 tr:nth-child(1) td:nth-child(2),
.table-border2 tr:nth-child(2) td:nth-child(2),
.table-border2 tr:nth-child(3) td:nth-child(2) {
  border-color: cyan;
  background: pink;
}
.table-border2 tr:nth-child(1) td:nth-child(3),
.table-border2 tr:nth-child(2) td:nth-child(3),
.table-border2 tr:nth-child(3) td:nth-child(3) {
  border-color: teal;
  background: yellow;
}

/* Second row of 3*/
.table-border2 tr:nth-child(4) td:first-child,
.table-border2 tr:nth-child(5) td:first-child,
.table-border2 tr:nth-child(6) td:first-child {
  border-color: blue;
  background: green;
}
.table-border2 tr:nth-child(4) td:nth-child(2),
.table-border2 tr:nth-child(5) td:nth-child(2),
.table-border2 tr:nth-child(6) td:nth-child(2) {
  border-color: orange;
  background: lime;
}
.table-border2 tr:nth-child(4) td:nth-child(3),
.table-border2 tr:nth-child(5) td:nth-child(3),
.table-border2 tr:nth-child(6) td:nth-child(3) {
  border-color: black;
  background: gray;
}

/* 3rd row */
.table-border2 tr:nth-child(7) td:first-child,
.table-border2 tr:nth-child(8) td:first-child,
.table-border2 tr:nth-child(9) td:first-child {
  border-color: red;
  background: orange;
}
.table-border2 tr:nth-child(7) td:nth-child(2),
.table-border2 tr:nth-child(8) td:nth-child(2),
.table-border2 tr:nth-child(9) td:nth-child(2) {
  border-color: cyan;
  background: pink;
}
.table-border2 tr:nth-child(7) td:nth-child(3),
.table-border2 tr:nth-child(8) td:nth-child(3),
.table-border2 tr:nth-child(9) td:nth-child(3) {
  border-color: teal;
  background: yellow;
}

/* last row of 3 */
.table-border2 tr:nth-child(10) td:first-child,
.table-border2 tr:nth-child(11) td:first-child,
.table-border2 tr:nth-child(12) td:first-child {
  border-color: blue;
  background: green;
}
.table-border2 tr:nth-child(10) td:nth-child(2),
.table-border2 tr:nth-child(11) td:nth-child(2),
.table-border2 tr:nth-child(12) td:nth-child(2) {
  border-color: orange;
  background: lime;
}
.table-border2 tr:nth-child(10) td:nth-child(3),
.table-border2 tr:nth-child(11) td:nth-child(3),
.table-border2 tr:nth-child(12) td:nth-child(3) {
  border-color: black;
  background: gray;
}

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.