How do I let table tds automatically increase or decrease the size depending on the number of characters?

Asked

Viewed 1,014 times

2

How to leave the td of table increasing or automatically decreasing the size depending on the number of characters? To prevent the text from breaking line?

html css

  • Can it be with Flex or has to be with Table even? What you already have of code?

  • I’m using table even. It’s got like?

  • Yes, you can use values in % in Table, but I’m not sure what you want to do. Can’t text ever break? Does it always have to be in one line? That’s why I asked you for the code of what you already have, or at least an image of how you want it to look. With Flex and Divs it is possible to do.

1 answer

1

I do not know if I understand very well, but for there is no break of lines, just define the property white-space of CSS as nowrap:

table tr > th,
table tr > td
{
  padding: 10px;
  border: #bbb 1px solid;
}

tr > td:first-child
{
  white-space: nowrap;
}
<table>
  <thead>
    <tr>
      <th>Texto sem quebrar</th>
      <th>Texto comum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</td>
      <td>Texto texto texto texto texto texto texto texto</td>
    </tr>
  </tbody>
</table>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.