CODEWITHSUNDEEP
htmlcsshtml-table
Saeed Neamati
Saeed Neamati

Reputation: 35822

How can I make my HTML table be 100% wide AND have all of its cells only be as wide as their contents?

I have this grid:

enter image description here

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

enter image description here

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?

Upvotes: 4

Views: 6681

Answers (2)

Paul D. Waite
Paul D. Waite

Reputation: 98786

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/

Upvotes: 7

IT By Design
IT By Design

Reputation: 59

The width of the <td> will be defined by the width of the <td> in first <tr>.

Otherwise you can use CSS to define rules for <td> width like:

.myform tr td{padding:0px;margin:0px;}
.myform td{width:200px;}

Upvotes: 1

Related Questions