时间戳

首页 > 解决方案 > 表格单元格溢出尽管框大小：border-box

html - 表格单元格溢出尽管框大小：border-box

问题描述

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

标签： htmlcsshtml-tableborder-boxbox-sizing

解决方案

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

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

推荐阅读