无法在表格中的列高度为 100% 时制作按钮

Question

你好，我的桌子有问题。我正在使用引导程序。表中有一些列（其中一些填充了数据，有些则没有）。每列都必须是一个按钮（空列也是如此）。我在 td 的 100% 高度上制作列中的按钮时遇到问题。一个条件是 td 中是 div 并且该 div 中有按钮。所以结构看起来像这样：<tr> <td>   <div> //THIS DIV IS IMPORTANT i am using react-bootstrap framework and component Button is including that div inside      My text data empty or not   </div> </td></tr>我删除了填充，我将 div 和按钮设置为 100% 高度和宽度，但按钮高度仍然不是 100%。请问问题出在哪里？这是jsfiddle我之前在这里放了坏链接现在应该没问题了

Answer 1

我检查了你的小提琴和情侣笔记：

1. Bottom将元素更改为button.

2. 由于您使用的是 bootstrap，因此您继承了它们的样式。覆盖它的最快方法是使用!important.

您可以添加：table th, table td {padding: 0!important;}然后button {height: 100%}将按预期工作。

Answer 2

阻止按钮具有 100% 高度的是表格 th 和 td 中的填充。

.table td, .table th {
  padding: 0;
}