KPC
Kevin Powell - Community•6mo ago
noob

How to make a td element fit content?

Hi guys, I have a table with 2 columns, the first column I want the width fit content, and the second one take the rest width. How can I archive this? 
  <table>
    <tr>
      <td>Fit content</td>
      <td>Full width/td>
    </tr>
  </table>
  <table>
    <tr>
      <td>Fit content</td>
      <td>Full width/td>
    </tr>
  </table>
10 Replies
Chris Bolson
Chris Bolson•6mo ago
Assuming that you want the first column contents to be on a single line you could apply white-space: nowrap; to that one and then width:100% to the second column 
td:first-child{
   white-space: nowrap;
}
td:last-child{
  width: 100%;
}
td:first-child{
   white-space: nowrap;
}
td:last-child{
  width: 100%;
}
ἔρως
ἔρως•6mo ago
you might want to use grid for the table, as the grid layout is a lot more sensible
noob
noobOP•6mo ago
Sry for late reply. It works as I expect. Thanks Do you mean using elements like <div> and arranging them with CSS Grid?
ἔρως
ἔρως•6mo ago
no, i meant grid
noob
noobOP•6mo ago
Can you give me an example? 😅
ἔρως
ἔρως•6mo ago
it's just css grid grid-template-columns: max-content auto should do it
noob
noobOP•6mo ago
Oh, it seems to work well in my case. Thanks
ἔρως
ἔρως•6mo ago
yup, but chris' way is better in some aspects, as you don't have to change the display type of anything, which can have weird effects
noob
noobOP•6mo ago
Noted. Thanks for your advice
ἔρως
ἔρως•6mo ago
you're welcome

Did you find this page helpful?