我有一个7列的表.我希望列具有以下宽度:
3列x width=20%
4列x width=10%
我创建了2个CSS类,每个宽度一个,我将它们分配给每个单元格.
我拥有的东西,这是行不通的.相反,宽度始终包含内容.如果我只放一个字母,比宽度会很小,如果我放大字符串,宽度会太大.我希望它不变.
CSS和HTML:
table {
width: 100%;
}
.ten {
width: 10%
}
.twenty {
width: 20%;
}
H1
H2
H3
H4
H5
H6
H7
A1
A2
A3
A4
A5
A6
A7
B1
B2
B3
B4
B5
B6
B7
有人可以解释如何实现我想要的吗？
要修复宽度,您可以使用table-layout:fixed;.
您可能还希望使用colgroup和col标签一次将宽度和bg分配给列.
table {
width: 100%;
table-layout: fixed;
}
.ten {
width: 10%;
background: tomato;
}
.twenty {
width: 20%;
background: turquoise
}
/* see me */
td {
border: solid;
}
/* play with bg cells and cols ? */
tr:nth-child(even) :nth-child(odd) {
background:rgba(100,255,50,0.3);
}
tr:nth-child(odd) :nth-child(even) {
background:rgba(255,255,255,0.3);
}
H1
H2
H3
H4
H5
H6
H7
A1
A2
A3
A4
A5
A6
A7
B1
B2
B3
B4
B5
B6
B7
A1
A2
A3
A4
A5
A6
A7
B1
B2
B3
B4
B5
B6
B7
京公网安备 11010802040832号 | 京ICP备19059560号-6 