JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
      <th>Header</th>
      <th>Header2</th>
      <th>Header3</th>
  </tr>
  <tr>
      <td><span>something</span></td>
      <td><span>foo</span></td>
      <td><span>baz</span></td>
  </tr>
  <tr>
      <td><span>another</span></td>
      <td><span>abcde</span></td>
      <td><span>html</span></td>
  </tr>
</table>

CSS

table {
    width: 350px;
    background: #fff; 
    font-family: sans-serif;
}

th { 
    font-weight: bold; 
    text-align: center;
}
td {
    background: transparent url("http://nontalk.s3.amazonaws.com/dots.png") repeat-x 0 75%; 
    height: 14px;
    font-size: 14px;
    vertical-align: bottom;
    text-align: center;
}

td span {
    background: #fff; 
    line-height: 18px;
    height: 18px;
    display: inline-block;
    padding: 0 4px;
}

th:first-child,
td:first-child {
    text-align: left;
}

td:first-child span {
  padding: 0 4px 0 0;   
}

th:last-child,
td:last-child { 
    text-align: right;
}

td:last-child span {
  padding: 0 0 0 4px;   
}