<td> 大于指定值答案

【问题标题】：<td>s are larger than specified<td> 大于指定值
【发布时间】：2021-06-03 19:57:43
【问题描述】：

我需要我的表格单元格具有100px 宽度，但它们具有112px 宽度（铬中的112，FF 中的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 和实际大小之间的差异总是相同的...

我错过了什么？

啊，是的，我试过了：

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

【问题讨论】：

请也发布您的 CSS 而不是 chrome 转储。马上，它看起来像一个 td 边界问题。
http://jsfiddle.net 是他的意思-> jsfiddle.net
我的猜测是，在同一列的其他单元格中，您有一些东西迫使单元格超出其规定的宽度。作为一个表格列中的所有单元格然后增长到最宽的宽度。尝试将每个单元格的内容包装在一个宽度为 100px 的 div 中，溢出隐藏。
这里：jsfiddle.net/3hFk7

标签： html css html-table

【解决方案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 表示提示的优先级

规范说：“UA 可以选择尊重 HTML 源文档中的表示属性。如果是这样，这些属性将被转换为对应的 CSS 规则的特异性等于 0，并且是就好像它们被插入到作者样式的开头一样对待床单。因此，它们可能会被后续样式表覆盖规则。”

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

【讨论】：

table-layout:fixed 不会阻止布局扩展，因为第三列中有一个没有应用样式的输入元素。它会使桌子变大。请参阅jsfiddle.net/JYKLf/1（第三列中的文本）与jsfiddle.net/6MFgv/1（带输入）
@Sigma 你是对的，但这不是我说的。我说“单元格总是会自动调整自己的大小以适应整个表格的宽度。除非你应用 table-layout:fixed” 那么标记是必要的吗？我只是在解释为什么单元格并不总是变成您指定的大小。
它似乎适用于表格单元格中的文本，但不适用于示例中的输入。输入将继续扩展表格单元格。
你还没有解释为什么投反对票？按照我的回答设置列宽将解决操作的问题。

【解决方案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

【讨论】：

你可以做table {border-collapse; collapse;} 这是的 CSS 等价物

【解决方案3】：

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

它将在该列的所有 tds 上应用宽度。在这种情况下，前两列将是 100px。根据内容，宽度至少为 100 像素或更多。此外，当您在 TD 上设置内边距时，每列仍将添加 100 像素。

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

【讨论】：