Question

我需要我的表格单元格宽度为100px，但宽度为112px宽度（Chrome中为112，FF中为113，IE10中为112.5 ）。

里面有足够的空间：

tiny screenshot

这些是应用于td的样式 styles

一块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与实际尺寸之间的差异始终相同 ......

我错过了什么？

是的，我试过了：

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中的宽度已弃用。

Cellspacing和Cellpadding

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

如果你在桌面上默认使用cellspacing和cellpadding ，那么你可以使用padding属性控制css中每个单元格的填充：

<强> CSS

th,td {
  padding:5px
}

CSS 2.1

中非CSS表示提示的优先顺序

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

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

带有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指定为零，同时删除默认边距和填充：

<强> 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

要定义列的宽度，可以使用col标记。 http://www.w3schools.com/tags/tag_col.asp

它将在该列的所有tds上应用宽度。在这种情况下，前两列将是100px。并且宽度将最小为100px或更多，具体取决于内容。此外，当你在TD上设置填充时，它仍然会增加每列100px。

<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/

s大于指定值

3 个答案:

Cellspacing和Cellpadding

CSS 2.1