<td> s greater than specified

Question

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

There is more than enough space inside:

And these are the styles applied to td

Html part:

 <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 the desired size? The differences between css and actual size are always the same ...

What am I missing?

Oh yes, I tried:

• Is the width of the table larger than indicated in pixels?
• Why does the browser show td more than my specified width property?

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

Answer 1

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

If you do not apply:

 table{ table-layout:fixed; } 

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

Manually set the width of the columns in the table using the column grouping:

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

NOTE. Use a style not width as width is reduced in HTML5.

---

Cell and honeycomb keyboard

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

If you defaultpacing and cellpadding in your table , then you can control the padding of each cell in css using the padding attribute:

CSS

 th,td { padding:5px } 

---

Priority for CSS-free presentations in CSS 2.1

Spec says:. UA can choose to perceive presentation attributes in the source HTML document. If so, these attributes are translated into the corresponding CSS rules with a specificity of 0, and are treated as if they were inserted at the beginning of the author’s stylesheet, so they can be overridden by subsequent stylesheet rules. "

Thus, any appropriate setting in any applied style of the author cancels the effect of the honeycomb. The attribute sets the padding (in each direction) for each table cell to the specified value in pixels. Therefore, if you set, for example, for a particular cell padding-right: 0, it will have this right pad and 4px pad 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 set cellpadding and cellspacing to zero, and also remove the default fields 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

Answer 3

To determine the width of the columns, you can use the col tag. http://www.w3schools.com/tags/tag_col.asp

It will apply width for all tds of this column. In this case, it will be 100px in the first two columns. The width will be at least 100 pixels or more depending on the content. In addition, when you set the registration on TD, it will still contain up to 100 pixels per column.

 <table> <colgroup> <col id='col_body_dates'> <col id='col_hdr_dates'> <col /> </colgroup> <tr> [...] #col_body_dates, #col_hdr_dates { width: 100px; } table { border-collapse: collapse; } #col_body_dates, #col_hdr_dates { width: 100px; } td { padding: 3px; } 

http://jsfiddle.net/vxsPL/53/