0 votes
in Education by (1.7m points)
I have this grid:

If I change the tables width from 100% to auto, table collapses horizontally.

Which is not desirable. How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by (1.7m points)
How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?

<table> and <tr> elements are as wide as the <td> elements inside of them. You can’t have every <td> be as small as its contents and have the table as a whole be as wide as the space available, because the table can only be as wide as the cells inside it.

(i.e. unlike most HTML elements, <table> elements can’t be sized independently from their contents.)

You can set one cell to be as wide as possible though, by giving it a width of 100%:

<table style="width: 100%; background: grey; color: white;">

     <tr>

         <td style="background: red;">Content</td>

         <td style="background: green;">Content</td>

         <td style="background: blue; width: 100%;">Content</td>

     </tr>

</table>

See http://jsfiddle.net/9bp9g/

Related questions

...