Table Header CSS

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I’m trying to remove the vertical borders between the column names in this table:

Which css element do I need to modify to do this? I’ve tried these with no luck:


.v-table {}
  .v-table-header-wrap {}
    .v-table-header {}
      .v-table-header-cell {}
        .v-table-resizer {} /* Column resizer handle. */
        .v-table-caption-container {}

Thanks

2

.v-table-resizer is the proper selector for this.

The line is probably either a border or a background on that element, so use both border: none; and background: transparent; properties.

3

Hi,

In addition to what Jouni said, I just want to add a little warning that you need to be careful with the widths of the elements when styling the table header. Certain changes in width might cause the column width and column header width to go “out of sync”, causing weird looking tables.

This comment in table.css in the base theme should explain what to look out for:

/* Table theme building instructions
 * 
 * Vaadin scroll table is very complex widget with dozens of features. These 
 * features set some limitations for theme builder. To keep things working, it
 * is safest to try to just override values used in default theme and comfort to
 * these instructions.
 * 
 * Borders in table header and in table body need to be same width
 * - specify vertical borders on .v-table-header-wrap and .v-table-body
 *
 * Table cells in body:
 *  - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
 *  - in default theme there are no borders, but they should work. Just set border-right or border-bottom
 *  - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
 *  - background is allowed for both elements
 *
 * Table headers:
 *  - table cells in header contain .v-table-resizer and 
 *	  .v-table-caption-container div elements, which are both floated to right
 *  - to align header caption to body content resizer width + .v-table-caption-container
 *    padding right should be equal to content cells padding-right and border-right.
 *  - Possible cell border in header must be themed into column resizer.
 *
 */

HTH and good luck!
/Jonatan

4

Jouni, Jonatan,

Thank you both!