Set width of td depending of the content inside them?-CodePudding

How can I set the width of a <td> in a table to be equal to the content of the largest <td> in that column and in the same time have the table with width of a 100%.

My table is sometimes less than 100% width because i have some columns with no content in them because i have not assigned any values to them.

CodePudding user response：

just set the width of the table to 100% and the width of <td> will change automatically

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table{
  width: 100%;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial MoctezumaCentro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>