Table 尽管调整了框大小，但单元格还是溢出了：border-box

Question

我想在 table 的单元格中添加填充，但这会导致 table 中的文本、输入等溢出。从其他 Stack Overflow 讨论中，我了解到答案是设置 box-sizing: border-box，但这对我不起作用。

下面是一个说明问题的最小示例。

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table,
th,
td {
  border: 1px solid black;
  padding: 1.5%;
}

table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td><input value=1></td>
  </tr>
</table>

填充为 1.5% 时，输入框会伸出其单元格的右端。如果 padding 更改为 0，则输入框会紧贴。我想保留填充但让输入框适合。

Answer 1

设置输入的宽度，使其填充 table 单元格

input{
    max-width: 100%;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table,
th,
td {
  border: 1px solid black;
  padding: 1.5%;
}

table {
  border-collapse: collapse;
}
input {
  max-width: 100%;
}

<!DOCTYPE html>
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td><input value=1></td>
  </tr>
</table>

编辑：感谢@javier Rey 的更正

Answer 2

确保 td 内的 input 仅跨越单元格的宽度。

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 1.5%;
}

td>input {
  max-width: 100%;
}

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td><input value="1"/></td>
  </tr>
</table>

Table 尽管调整了框大小，但单元格还是溢出了：border-box

Table cells overflow despite box-sizing: border-box

html

css

html-table

border-box

box-sizing