html - How to create even cell spacing within a <table>

Question

I have been working on a small. However, I have a table where the cells are all sized automatically by the size of the text in each cell. How would I go about making all the cells the same width? For example, have 10 cells across, with each cell always using up 10% of the table's width.

You can see an JSFiddle of a table where the cells are different widths depending on the text here: https://jsfiddle.net/0sLb8cyo/2/

<table>
  <tr>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
  </tr>
  <tr>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
  </tr>
</table>

Thanks in advance.

Answer 1

Insert this into the CSS and you will succeed

table {
  width: 100%;
  table-layout: fixed;
}
table td {
  width: 100%;
}

table {
  width: 100%;
  table-layout: fixed;
}
table td {
  width: 100%;
}

<table>
  <tr>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
  </tr>
  <tr>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>boat</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
    <td>car</td>
  </tr>
</table>