<td> s大于指定值

Question

我需要我的表格单元格有100px宽度,但它们有112px宽度(112在Chrome中,113在FF中,112.5在IE10中).

里面有足够的空间:

这些是应用的样式 td

一块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>

如何制作所需尺寸？css和实际尺寸之间的差异总是一样的 ......

我错过了什么？

是的,我试过了:

• 表宽度是否比指定的像素长？
• 为什么浏览器显示td大于我指定的宽度属性？

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

Answer 1

您的桌子不是固定宽度。单元格将始终自动调整其大小以适应整个表格的宽度。

除非您申请：

table{
    table-layout:fixed;
}

仅当列的总和等于表的总宽度时，才可以设置列的宽度。

使用列分组在表格上手动设置列宽：

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

注意：使用样式而不是宽度，因为HTML5中的宽度已弃用。

单元间距和单元填充

如果未指定值，则将使用用户浏览器指定的默认值。对于表，它并不总是为0。

如果您在表上使用默认的cellspacing和cellpadding，则可以使用padding属性控制css中每个单元格的填充：

的CSS

th,td {
  padding:5px
}

CSS 2.1中非CSS呈现提示的优先级

规范说： “ UA可以选择遵循HTML源文档中的表示属性。如果是这样，则将这些属性转换为对应的CSS规则，其特异性等于0，并且将其视为在作者样式表的开头插入。因此，它们可能会被后续的样式表规则所覆盖。”

因此，所应用的任何作者样式表中的任何相关设置都将覆盖cellpacing的效果。该属性将表的每个单元格的填充（沿每个方向）设置为指定值（以像素为单位）。因此，如果您为特定的单元格设置padding-right：0，则它将在其他方向上具有该padding-right和4px padding。

带cellpadding和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>

注意： HTML5不支持cellpadding属性。改用CSS。

http://jsfiddle.net/Zb8kR/

Answer 2

您需要指定cellpadding和cellspacing为零，还需要删除默认边距和填充：

超文本标记语言

<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;
}

小提琴