JSFiddle - React, Tailwind, and code Playground

Table width collapse

by tonytlwu

HTML

<h3>Problem</h3>

<table>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td style="width:15px;height:15px"></td>
    <td style="width:15px;height:15px"></td>
  </tr>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td>
      <p>Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </td>
    <td style="width:15px;height:15px"></td>
  </tr>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td style="width:15px;height:15px"></td>
    <td style="width:15px;height:15px"></td>
  </tr>
</table>

<h3>Solution</h3>

<table>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td></td> <!-- Remove width in this line then the problem is fixed -->
    <td style="width:15px;height:15px"></td>
  </tr>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td>
      <p>Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </td>
    <td style="width:15px;height:15px"></td>
  </tr>
  <tr>
    <td style="width:15px;height:15px"></td>
    <td></td> <!-- Remove width in this line then the problem is fixed -->
    <td style="width:15px;height:15px"></td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}