Vaadin 7 Grid表头标题换行及行高适配问题咨询

正确的CSS样式设置 #

你之前的CSS选择器匹配有误，结合Vaadin 7 Grid的DOM结构，使用以下样式即可实现表头标题换行，并自动适配行高：

/* 允许表头标题文本换行 */
.v-grid-header-cell .v-grid-column-header-content {
    white-space: normal !important;
    word-wrap: break-word;
}

/* 取消表头行固定高度，自动适配内容 */
.v-grid-header-row, .v-grid-header-cell {
    height: auto !important;
}

/* 确保表头内容垂直居中排版 */
.v-grid-header-cell {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* 可根据需求调整内边距 */
}

关键说明 #

• !important用于覆盖Vaadin默认样式的优先级，若你的样式文件加载顺序在Vaadin主题之后，也可省略
• word-wrap: break-word保证长单词或无空格的文本也能正常换行
• 取消固定高度后，表头行高会根据标题内容自动调整，配合flex布局避免内容偏移

内容的提问来源于stack exchange，提问作者Tony B