<td>s are larger than specified

Question

I need my table cells have 100px width, but instead they have 112px width (112 in chrome, 113 in FF, 112.5 in IE10).

There is more than enough space inside:

And these are styles applied to td

Piece of html:

<tr>
    <td class = 'col_body_dates'>12.12.2013<br/>20.12.2013</td>
    <td class='col_body_status cell_status_1'>в процессе</td>
    <td class='col_body_score'><input id = '7623373922438661459' value = '0'></td>
    ...
    ...
</tr>

How do I make them desired size? Differences between css and real size are always the same...

What am I missing?

Ah yes, I tried :

• Table width is longer then the pixels specified?
• Why is browser showing td's larger than my specified width property?

JSFiddle: http://jsfiddle.net/3hFk7/

Answer 1

Your table is not a fixed width. Cells will always automatically resize themselves to accommodate the width of the entire table.

Unless you apply:

table{
    table-layout:fixed;
}

You can set the width of a column only if the sum of the columns equal the total width of the table.

Manually set column widths on the table using column grouping:

  <colgroup>
     <col span="1" style="width: 100px;">
     <col span="1" style="width: 100px;">
     <col span="1" style="width: 100px;">
  </colgroup>

NOTE: Use style not width as width is depreciated in HTML5 and ideally set styles in CSS instead of inline.

---

Cellspacing and Cellpadding

If you do not specify a value the default value designated by the users browser will be used. This is not always 0 when it comes to tables.

If you default cellspacing and cellpadding on your table then you can control the padding of each cell in css using the padding attribute:

CSS

th,td {
  padding:5px
}

---

Precedence of non-CSS presentational hints in the CSS 2.1

Spec says: “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.”

So any relevant setting in any author style sheet being applied overrides the effect of cellspacing. The attribute sets the padding (in each direction) for each cell of the table to the specified value in pixels. So if you set e.g. for a particular cell padding-right: 0, it will have that right padding and 4px padding in other directions.

---

Table with cellpadding and cellpadding:

<table cellpadding="10" cellpadding="10">
  <tr>
    <th>Head 1</th>
    <th>Head 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Note: The cellpadding attribute is not supported in HTML5. Use CSS instead.

http://jsfiddle.net/Zb8kR/

Answer 2

You need to specify cellpadding and cellspacing to zero, also remove default margins and paddings:

HTML

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>   
</table>

CSS

table td {
    padding: 0;
    margin: 0;
    width: 100px;
}

FIDDLE