Html 单元格内联边框不';当其中一个单元格中有多行文本时,请不要拉伸
我有一张用沙发做的桌子。当每个单元格只有一行文本时,它工作正常,但是,当其中一个单元格中有更多文本时,问题就开始了。此单元格中的文本将被包装为多行,此单元格的内联边框将被拉伸,但所有其他单元格都将完全冻结。 html代码是:Html 单元格内联边框不';当其中一个单元格中有多行文本时,请不要拉伸,html,css,Html,Css,我有一张用沙发做的桌子。当每个单元格只有一行文本时,它工作正常,但是,当其中一个单元格中有更多文本时,问题就开始了。此单元格中的文本将被包装为多行,此单元格的内联边框将被拉伸,但所有其他单元格都将完全冻结。 html代码是: div{ 框大小:边框框; -moz框大小:边框框; -webkit框大小:边框框; } .集装箱{ 显示:表格; 边界塌陷:塌陷; 垂直对齐:中间对齐; 宽度:100%; } 特罗先生{ 宽度:100%; 显示:表格行; 边框:1px实心; } .trow1{ 宽度:1
div{
框大小:边框框;
-moz框大小:边框框;
-webkit框大小:边框框;
}
.集装箱{
显示:表格;
边界塌陷:塌陷;
垂直对齐:中间对齐;
宽度:100%;
}
特罗先生{
宽度:100%;
显示:表格行;
边框:1px实心;
}
.trow1{
宽度:100%;
显示:表格行;
边框:1px实心;
文本对齐:居中;
}
特塞尔先生{
浮动:左;
显示:表格单元格;
右边框:1px实心;
}
剩下的东西
中间材料
正确的东西
剩下的东西
中间材料
正确的东西
右填充器右填充器右填充器右填充器右填充器右填充器右填充器右填充器右填充器
您可以为trow
和trow1
设置display:table
,然后它看起来就像您想要的:
div{
框大小:边框框;
-moz框大小:边框框;
-webkit框大小:边框框;
}
.集装箱{
显示:表格;
边界塌陷:塌陷;
垂直对齐:中间对齐;
宽度:100%;
}
特罗先生{
宽度:100%;
显示:表格;
边框:1px实心;
}
.trow1{
宽度:100%;
显示:表格;
边框:1px实心;
文本对齐:居中;
}
特塞尔先生{
显示:表格单元格;
右边框:1px实心;
}
剩下的东西
中间材料
正确的东西
剩下的东西
中间材料
正确的东西
右填充器右填充器右填充器右填充器右填充器右填充器右填充器右填充器右填充器
其他单元格独立于拉伸的内容,如果您想让它们拉伸,请将其更改为flex或flex inline,这是最简单的方法。另外,你的CSS基本上是让你的代码成为一个表格——为什么不使用一个
?如果你从.tcell中删除float:left,它将帮助你解决当前的问题,但会导致另一个问题。非常感谢!现在它确实起作用了,尽管右侧边界比它应该的更大胆,但我相信我能做到,最重要的问题已经解决了,再次感谢。