Autoadjust cell width to content in CSS with overflows

Question

I have the following table, with different widths of contents in each cell. I want the long next to nowrap and overflow.

I tried what it´s mentioned here: Why does overflow:hidden not work in a <td>?

But the result is all the cells get the same width, and I need the cells to adjust to the inner content, so there is not so much waisted white space in cells with short content (such as the checkbox one).

I can´t apply divs instead, and I can´t apply specific widths to each column since is a dynamic table so number of columns and it content may change.

¿Any clue?

Here´s the code. See the example at JSfiddle

<html>
  <head>
    <style>
    table {
      width: 100%;
    }
    table td {
      border: 1px solid #ccc;
      max-width: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          ID001
        </td>
        <td>
          Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
        </td>
      </tr>
    </table>
  </body>
</html>

The size of the columns is divided by the max-width applied to it. As you have set the max-width of all columns to 1px, the columns are sized equally, which is why you have three equal width columns. If your long text is always going to be in your last column, you could give that one a larger size - eg https://jsfiddle.net/qfsoo4wv/2/ - and if the checkbox is in the first, you could make that smaller: https://jsfiddle.net/qfsoo4wv/3/ but it means that all columns that share a size will be equal widths — Pete, May 04 '17 at 14:33
Thank you Pete, that´s exactly my problem, the last column won´t be always the largest one, nor the first one will place always a checkbox. I think there´s no proper solution for me :( — MaryGG, May 04 '17 at 17:22

score -1 · Answer 1 · answered May 04 '17 at 14:23

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

table td:nth-of-type(1) {
  width: 20px;
  padding: 5px 0;
}
table td:nth-of-type(2) {
  width: 100px;
}
table td {
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
}

<table>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      ID001
    </td>
    <td>
      Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
    </td>
  </tr>
</table>

Thanks, Nick, I already tried that, but as I said I don´t want to give specific width to any column since these colums may vary on its content. I´d like the width to automatically adjust to the inner content. — MaryGG, May 04 '17 at 14:26
OP has specifically stated: *I can´t apply specific widths to each column since is a dynamic table* — Pete, May 04 '17 at 14:27

Autoadjust cell width to content in CSS with overflows

1 Answers1