Html 调整表脚高度

我很难调整桌脚的高度（tfoot）

@font-face{
字体系列：Poppins；
src:url（./font/poppin/Poppins-Light.otf）；
}
身体{
字体系列：Poppins，arial；
字体大小：14px；
线高：1.2米；
}
.数据视图{
宽度：自动；
保证金：0自动；
表布局：固定；
边界塌陷：塌陷；
边框：1px纯黑；
}
.dataview thead{
背景颜色：矢车菊蓝；
颜色：黄色；
字体大小：粗体；
}
.dataview thead tr{
显示：块；
位置：相对位置；
}
.dataview tbody tr:n最后一个子项（1）{
边框底部：无；
}
.dataview tbody{
显示：块；
溢出y：滚动；
溢出x：隐藏；
宽度：100%；
背景色：#F2F2；
}
.dataview th、.dataview td{
填充物：5px；
文本对齐：左对齐；
}
.dataview th{
高度：30px；
}
.dataview tr{
边框底部：1px纯黑
}
.dataview th.right、.dataview td.right{
文本对齐：右对齐；
}
.dataview th.center、.dataview td.center{
文本对齐：居中；
}
.dataview tbody tr:第n个子项（偶数）{
背景色：#ccd8ff；
}
.dataview tbody tr：悬停td{
背景颜色：黄色；
}
.dataview tfoot td{
高度：20px；
背景色：番茄；
边框顶部：1件纯黑；
}
/*clidata浏览*/
.dataview#clidata浏览{
宽度：自动；
框大小：边框框；
}
.dataview#clidata浏览td{
高度：45px；
}
.dataview#clidata浏览第n个子项（1），
.dataview#clidata浏览td:n子项（1）{
最小宽度：350px；
}
.dataview#clidata浏览第n个子项（2），
.dataview#clidata浏览td:n子项（2）{
最小宽度：350px；
}
.dataview#clidata浏览第n个子项（3），
.dataview#clidata浏览td:n子项（3）{
最小宽度：100px；
右边填充：10px；
}
.dataview#clidata浏览正文{
高度：380px；
}

箭叶沙箱
客户名称
电子邮件地址
平衡
客户1

客户地址
testcust1@gmail.com
$3000.00
客户2

客户地址
testcust2@gmail.com
$40.00
这是一个测试

根本原因 它非常简单，并且与

的两个相互竞争的CSS选择器有关：

及

我通过检查

tfoot td

标记来解决这个问题：

解释 后者的值更高，因为它包含ID选择器

#clidata browse

解决方案 要解决这个问题，您可以做几件事，最简单的就是添加

！重要信息

标记到

.dataview tfoot td

高度CSS选择器

.dataview tfoot td {
  height: 20px !important;
  background-color: tomato;
  border-top: 1px solid black;
}

---

或者，可以将第二个选择器调整为以下值：

.dataview#clidata-browse thead td,
.dataview#clidata-browse tbody td {
  height: 45px;
}

---

这避免了选择页脚

元素来改变高度。

tfoot标签支持

样式属性，您可以使用它来提高高度。
例如
如果使用
display:block
使身体滚动，则还可以使用
flex
和
grid
重置整个布局。然后可以在桌子上设置高度

需要滚动和不需要滚动的示例（添加边框以显示单元格的位置）：


表格{
高度：300px；
显示器：flex；
弯曲方向：立柱；
文本对齐：左对齐；
}
泰德{
背景：绿松石；
右侧填充：1.1米；
}
thead tr，
tbody tr{
显示：网格；
网格模板列：1fr 1fr 0.5fr；/*通过fr、fit-content（）、minmax（）、px%或最适合您需要的任何值在此处设置列宽*/
}
th，
运输署{
填充：0.25em；
保证金：3倍；
边框：1px实心；
显示：块；
}
t车身{
溢出y：滚动；
宽度：100%；
}
t脚掌{
背景：番茄；
弹性：1；
显示器：flex；
}
tfoot tr{
弹性：1；
保证金：3倍；
边框：实心1px；
显示器：flex；
}
tfoot tr td{
保证金：自动；
边界：无；
}

客户名称
电子邮件地址
平衡
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
这是一个测试

客户名称
电子邮件地址
平衡
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
客户1
客户地址
testcust1@gmail.com
$3000.00
客户2
客户地址
testcust2@gmail.com
$40.00
.dataview tfoot td {
  height: 20px !important;
  background-color: tomato;
  border-top: 1px solid black;
}

.dataview#clidata-browse thead td,
.dataview#clidata-browse tbody td {
  height: 45px;
}