Equal Sized Table Cells to Fill the Entire Width of the Containing Table

Equal sized table cells to fill the entire width of the containing table

You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.

ul {    width: 100%;    display: table;    table-layout: fixed;    border-collapse: collapse;}li {    display: table-cell;    text-align: center;    border: 1px solid hotpink;    vertical-align: middle;    word-wrap: break-word;}

<ul>  <li>foo<br>foo</li>  <li>barbarbarbarbar</li>  <li>baz</li></ul>

CSS table-cell equal width

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.

Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.

CSS (relevant instructions):

div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.

Table with 100% width with equal size columns

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

For variable number of columns use %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

where 'x' is number of columns

Fit cell width to content

I'm not sure if I understand your question, but I'll take a stab at it:

td {
    border: 1px solid #000;
}

tr td:last-child {
    width: 1%;
    white-space: nowrap;
}

<table style="width: 100%;">
    <tr>
        <td class="block">this should stretch</td>
        <td class="block">this should stretch</td>
        <td class="block">this should be the content width</td>
    </tr>
</table>

How can I make this table span the entire width of the space between 2 elements?

Is this what you're trying to achieve? (run the snippet to view)
Basically, if you want to have a header with 3 elements that have different widths yet fill the entire width then you can use CSS to set the parent as display:table then the children as display:table-cell. It works with dynamic widths for any of the elements without any need of floating...

html, body {margin:0;padding:0}
header {  position: fixed;  width: 100%;  height: 2.5em;  background-color: #202020;  display:table;  text-align: center;}
#top-spacer {  height: 2.5em;  width: 100%;}
#logo {  width: auto;  height: 2.5em;  display:table-cell;}
#nav-container {  display:table-cell;  max-width: 100%;}
nav {  width: 100%;  height:100%;  background-color: blue;}
nav table tr {  width: 100%;  color:#FFF;}
nav table td {  height: 2.5em;}
#menu-button {  width: auto;  display:table-cell;  height: 2.5em;  opacity: 0.3;  transition: opacity 1s;}#menu-button:hover {  opacity: 1;  display:table-cell;  background:red;}

<html lang=en>
<head>  <meta charset="utf-8">  <meta name="Description" content="describey mcscriberson">  <meta name="keywords" content="a,b,c,d">  <link rel="stylesheet" href="css/normalize.css" type="text/css">  <link rel="stylesheet" href="css/style.css" type="text/css"></head>
<body>  <header>    <img src="img/logo.png" id="logo">    <div id="nav-container">      <nav>        <table width="100%">          <tr>            <td>link</td>            <td>link</td>            <td>link</td>            <td>link</td>            <td>link</td>            <td>link</td>          </tr>        </table>      </nav>    </div>    <img src="img/menu.png" id="menu-button">  </header>  <div id="top-spacer"> </div>
</body>
</html>

How can I automatically re-size standard table cells to fit header cells within the table's width?

You need the attribute colspan https://jsfiddle.net/yb1hcy7q/1/

See: https://www.w3.org/wiki/HTML/Elements/td

body {  color: #FFF;  font-family: 'Open Sans', sans-serif;  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}table {  border-collapse: collapse;  font-size: 25px;  margin: auto;  width: 500px;}th,td {  border: 1px solid black;  height: 50px;  padding: 5px;  text-align: center;}th {  background-color: #8000FF;  color: #FFF;  width: 50px;}td {  width: 350px;}table tr:nth-child(odd) td {  background-color: #FF8000;}table tr:nth-child(even) td {  background-color: #00FF80;}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><table>  <tbody>    <tr>      <th>18</th>      <td colspan="2">LqtgHRqNcW</td>    </tr>    <tr>      <th>91</th>      <td colspan="2">BhydHJUADT</td>    </tr>    <tr>      <th>85</th>      <td>frvFQoRUuC</td>      <th>5214</th>    </tr>    <tr>      <th>06</th>      <td>tIfFHLblmN</td>      <th>8808</th>    </tr>    <tr>      <th>49</th>      <td colspan="2">HMPbrfKYcN</td>    </tr>    <tr>      <th>68</th>      <td colspan="2">mMxIjEQMgD</td>    </tr>    <tr>      <th>39</th>      <td colspan="2">dDFSkkkLww</td>    </tr>    <tr>      <th>57</th>      <td>vMvOZYyLIB</td>      <th>3235</th>    </tr>    <tr>      <th>12</th>      <td colspan="2">AKWQsKDNpr</td>    </tr>    <tr>      <th>58</th>      <td colspan="2">oCNXiRSwOO</td>    </tr>  </tbody></table>

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td {  border: 1px solid black;  width: 100px;  overflow: hidden;}

<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

Table cells equal

You can use min-width, to set the minimum width, of the <td> elements, in place of width, for example: min-width:206px; (JS Fiddle demo).

The problem with width seems to be that the <table> element tries, or is made to, respect the width of the parent element or viewport. Making this wider will allow the <td> elements to stretch to the specified size; otherwise it'll be constrained. min-width 'solves' this by forcing the minimum, thereby forcing the <table> to expand beyond the constraints of its parent.

Equal Sized Table Cells to Fill the Entire Width of the Containing Table