What I'm trying to achieve is the following table (which I created using Word):

Each cell basically acts as if it has two columns within it, the text-characters on the left and the digits on the right. How can I do this in HTML? The closest I have gotten is a normal table with empty cells acting as the space between the text and the digits, but that's not what I want. What's a cleaner way to do this?

CodePudding user response：

If I'm understanding your intent correctly, see example below using a default auto layout and sharing a width between the wide columns to allow the skinny ones to only consume space necessary (unless you want to give them a fixed width of sorts). Though in the future a reproducible example of your effort is appreciated.

table {
  table-layout: auto;
  border-collapse: collapse;
  border-bottom: #000 1px solid;
  width: 100%;
}

th { text-align: left }

th, td {
 padding: 0 .5rem;
}

table th:nth-child(odd) {
  width: 50%;
  border: #0f0 1px dashed;
}

table th:nth-child(2), table td:nth-child(2) {
  border-right: #000 1px solid;
}

table tr:first-child {
  border-bottom: #000 1px solid;
}

table tr:last-child {
  border-top: #000 1px solid;
}

<table>
  <tr>
    <th>
      wide column
    </th>
    <th>
      skinny
    </th>
    <th>
      wide column
    </th>
    <th>
      skinny
    </th>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
    <td>
      Stuff
    </td>
  </tr>
</table>