Question

我想在表的单元格中添加填充，但这会导致表中的文本，输入等溢出。从其他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

设置输入的宽度，以便它将填充表格单元格

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

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

* {
  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>

尽管单元格大小调整，但表格单元格仍溢出：border-box

2 个答案: