要实现不移动表格内容的垂直拉伸,可以使用CSS中的table-layout
属性和HTML中的colgroup
元素。以下是一个示例代码:
HTML代码:
内容1
内容2
内容3
内容4
内容5
内容6
CSS代码:
table {
width: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
word-wrap: break-word;
}
在上面的示例中,table-layout: fixed;
属性用于固定表格布局,并使宽度根据col
元素的设置进行分配。colgroup
元素用于定义每一列的宽度,通过设置
元素的style
属性来指定具体的宽度。word-wrap: break-word;
属性用于在单元格内容超出宽度时进行自动换行。
这样,当表格宽度改变时,表格的内容会自动换行,但不会移动或压缩单元格的内容。