table中一般用td来设置每行的高度
避免用td设置,用tr设置的话,不能保证最后一个tr的高度
table tr{
width: 100%;
text-align: center;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}
/* 注意点 */
table td{
height: 122px;
}
以下为错误写法:
table tr{
width: 100%;
text-align: center;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}
/* 注意点 */
table tr{
height: 122px;
}
在table的border为0的情况下tr的border失效
在table样式内加上 /* 为表格合并边框模型 */
border-collapse: collapse;
table{
width: 100%;
/* 为表格合并边框模型 */
border-collapse: collapse;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}
table tr{
width: 100%;
text-align: center;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}
table td{
/* 注意点 */
height: 122px;
}
无效果的原因是因为tr标签的属性中没有border 和 solid 的属性。
默认table边框是折叠的,行组和列组是不具有border的,边框不折叠的表格(即border-collapse: collapse;) 。