CSS: how to make the widths of the columns as wide as the longest text

Question

I open this post after I looked at this post without success: How to set table column widths to the longest value, excluding header

I want to draw a table, and I want that the width of each column will be compatible to the longest text in this column. For example, if the following values lie in column A: "abc", "abcd", "abcde", the width of column A will be 5 characters long.

I tried:

td {
  white-space: nowrap;
  overflow: hidden;
}

How can I do it?

Answer 1

I think that's the default behavior of tables. Have made a simple table that just behaves as you want it (refer this JSFiddle). The column width is equal to the longest text in them.

<table>
  <thead>
    <th>Column A</th>
     <th>Column B</th>
  </thead>
  <tbody>
    <tr>
      <td>abc</td> <td>abcdefghijklm</td>
    </tr>
    <tr>
       <td>abcdefghijklmno ddsp</td>  <td>ab</td>
    </tr>
     <tr>
       <td>ab</td>  <td>ab</td>
    </tr>
  </tbody>
</table>

Not sure if you wanted to ask something else ?