html - 大于指定值

Question

我需要我的表格单元格有 100px 宽度，但它们有 112px 宽度(112 在 chrome 中，113，IE10 中的 112.5)。

里面的空间绰绰有余:

这些是应用于 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 和实际大小之间的差异总是相同的...

我错过了什么？

是的，我试过了:

• 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

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

除非您申请:

table{
    table-layout:fixed;
}

只有当列的总和等于表格的总宽度时，您才能设置列的宽度。

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

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

注意:使用 style 而不是 width，因为宽度在 HTML5 中是贬值的，最好在 CSS 中而不是内联中设置样式。

---

单元格间距和单元格填充

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

如果您在您的表格上设置了默认的单元格间距和单元格填充，那么您可以使用 padding 属性控制 css 中每个单元格的填充:

CSS

th,td {
  padding:5px
}

---

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

Spec says: “The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated tothe corresponding CSS rules with specificity equal to 0, and aretreated as if they were inserted at the start of the author stylesheet. They may therefore be overridden by subsequent style sheetrules.”

因此，所应用的任何作者样式表中的任何相关设置都会覆盖单元格间距的效果。该属性将表格每个单元格的填充(在每个方向上)设置为以像素为单位的指定值。所以如果你设置例如对于特定的单元格 padding-right: 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/