CODEWITHSUNDEEP
htmlcss
Ben Jacobs
Ben Jacobs

Reputation: 2526

Elements of 100% width rendering <td> differently

I'm laying out a table (yes, for tabular data!) and I'm failing to understand how the widths of the table cells are being determined. For a <table> with 100% width and two empty <td> cells, each cell will take up half the space. Things start changing once different elements are added within the <td>s. However, the children elements of the <td>s all have width of 100%. I would not expect this to change the width of the cells, but it does.

For example, the two cells in the following code have different widths:

<table>
    <tbody>
        <tr>
            <td>
                <div>100%</div>
            </td>
            <td>
                <input placeholder="other" type="text" />
            </td>
        </tr>
    </tbody>
</table>

I collected a few other examples in this jsfiddle.

My question(s):

  1. Why is this happening (e.g. why aren't the columns even?)?
  2. Can I maintain evenly sized cells regardless of their contents, even if I don't know how many columns there will be for a given table?

Upvotes: 0

Views: 80

Answers (2)

Hbirjand
Hbirjand

Reputation: 1965

You can simple use the table-layout:fixed CSS property to solve the issue, here is the solution.

http://jsfiddle.net/hbirjand/HWhp6/

Upvotes: 1

Schleis
Schleis

Reputation: 43790

You are letting the browser determine the widths and it will collapse the smaller one to minimum size for the containing elements. If you want to have everything being equal set table-layout: fixed on your table css.

This will divide the columns close to evenly for you.

http://jsfiddle.net/Jqqd9/6/

http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

In the fixed table layout algorithm, the width of each column is determined as follows:

  1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
  2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
  3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The default is auto which is found in this manner.

Column widths are determined as follows:

  1. Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width. Also, calculate the "maximum" cell width of each cell: formatting the content without breaking lines other than where explicit line breaks occur.
  2. For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by the cell with the largest minimum cell width (or the column 'width', whichever is larger). The maximum is that required by the cell with the largest maximum cell width (or the column 'width', whichever is larger).
  3. For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as wide as the cell. Do the same for the maximum widths. If possible, widen all spanned columns by approximately the same amount.
  4. For each column group element with a 'width' other than 'auto', increase the minimum widths of the columns it spans, so that together they are at least as wide as the column group's 'width'.

Upvotes: 1

Related Questions