<td>的大小超出了规定值。

Question

<td>的大小超出了规定值。

htmlcsshtml-table

13

我需要我的表格单元格具有 100px 的宽度，但实际上它们的宽度为 112px （在 Chrome 中为 112，Firefox 中为 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/

- amdc

2

请发布您的CSS，而不是Chrome转储。一开始看起来像是td边框问题。 - Lowkase

“http://jsfiddle.net” 是他所指的 -> http://jsfiddle.net - Philip

我的猜测是，在同一列的某个其他单元格中，您可能有某些内容强制该单元格超出其规定宽度。作为表格，该列中的所有单元格都会增长到最宽的宽度。尝试将每个单元格的内容包装在宽度为100px溢出隐藏的div中。 - Woody

请点击此处查看代码示例：http://jsfiddle.net/3hFk7/ - amdc

3个回答

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

- epoch

你可以使用table {border-collapse; collapse;}来实现CSS等效于<table cellspacing="0" cellpadding="0">的效果。 - JohanVdR

0

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

它将在该列的所有td上应用宽度。在这种情况下，前两列的宽度为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/

- JohanVdR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DreamTeK · Accepted Answer

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

除非您应用：

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中，不要使用width，而应使用style，最好将样式设置为CSS样式而不是内联样式。

单元格间距和单元格填充

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

如果你想要默认的单元格间距和单元格填充，那么可以使用padding属性在css中控制每个单元格的填充：

CSS

th,td {
  padding:5px
}

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

规范说明：“UA可以选择遵守HTML源文档中的呈现属性。如果这样，这些属性将被转换为特定度为0的相应CSS规则，并像插入到作者样式表开头一样进行处理。因此，它们可能会被后续样式表规则覆盖。”

因此，应用于任何作者样式表中的相关设置会覆盖cellspacing的效果。该属性设置了表格每个单元格的填充（每个方向）为指定值（以像素为单位）。因此，如果您为特定单元格设置了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>

注意: cellpadding属性在HTML5中不被支持。请改用CSS。

http://jsfiddle.net/Zb8kR/