Why Is Browser Showing Td's Larger Than My Specified Width Property

Why is browser showing td's larger than my specified width property?

Set table-layout: fixed; on the table's styles. Otherwise table layout is loose and width is treated more like min-width.

td widths, not working?

It should be:

<td width="200">

or

<td style="width: 200px">

Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.

EDIT

As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.

td class, very confused, larger number makes width smaller?

Table layout has its fans and haters, but one thing is for sure, it's an advanced maneuver. It's like a combination of forces, some weaker, some stronger, that ultimately determine your column widths. And there's a lot of input variables:

• table-layout:fixed or not
• Table has a specific width (in pixels or percent or not at all)
• Do all columns have widths?
• Is there a colgroup element in the table?
• How much space is available for the table?
• Do any cells have non-breakable content?

It's kind of a nightmare for the inexperienced.

In your particular situation you table has no specific width, meaning it'll be the sum of the widths of the columns. But the columns are sized in percentages, which would be percentages of the total table width. You can see this is a chicken-and-egg problem.

Also using percentages that don't add up to 100% is kind of undefined.

I'd take a step back and think about what you're trying to achieve exactly.

width attribute of td is not overriding css width property

From the CSS 2.1 spec

6.4.4 Precedence of non-CSS presentational hints

The UA may choose to honor presentational attributes in an HTML source
document. If so, these attributes are translated to the corresponding
CSS rules with specificity equal to 0, and are treated as if they were
inserted at the start of the author style sheet. They may therefore be
overridden by subsequent style sheet rules. In a transition phase,
this policy will make it easier for stylistic attributes to coexist
with style sheets.

So CSS styles always out-rank presentational attributes in HTML.

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>

Why TD width is not working or not followed?

I highly believe the answer to this question is such:

The priority of widths that will affect the TD is

1. Table Width

2. Parent Element Width (and if none, Viewport)

3. Element(TD) Width.

Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.

Edit

1. Table width will always override TD width.

2. Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.

How is column width determined in browser?

From http://www.w3.org/TR/CSS21/tables.html

This was not overriden by CSS3 yet, but this part of spec is non-normative, so probably browsers does not comply to it exactly (there is no normative definition of this behavior afaik).

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'.

This gives a maximum and minimum width for each column.

The caption width minimum (CAPMIN) is determined by calculating for
each caption the minimum caption outer width as the MCW of a
hypothetical table cell that contains the caption formatted as
"display: block". The greatest of the minimum caption outer widths is
CAPMIN.

Column and caption widths influence the final table width as follows:

1. If the 'table' or 'inline-table' element's 'width' property has a
   computed value (W) other than 'auto', the used width is the greater of
   W, CAPMIN, and the minimum width required by all the columns plus cell
   spacing or borders (MIN). If the used width is greater than MIN, the
   extra width should be distributed over the columns.
2. If the 'table' or
   'inline-table' element has 'width: auto', the used width is the
   greater of the table's containing block width, CAPMIN, and MIN.
   However, if either CAPMIN or the maximum width required by the columns
   plus cell spacing or borders (MAX) is less than that of the containing
   block, use max(MAX, CAPMIN).

A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)

How to set up fixed width for td?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

---

Related Topics