0

我想为表格的单元格添加填充，但这会导致表格内的文本、输入等溢出。从其他 Stack Overflow 讨论中，我收集到答案是 set 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，则输入框非常适合。我想保留填充但使输入框适合。

4

2 回答 2

3

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

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 的更正

于 2019-01-20T20:17:35.777 回答
1

确保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>

于 2019-01-21T03:07:32.750 回答