Perspective Table Header: Why Does a White Bar Remain?

What is the screen telling you?

You recolored the table header and most of the row took the new color. A white strip remains in the empty space after the last column. The column styling is correct, but it is applied to the wrong layer.

A Perspective table header has two layers:

When every column has strictWidth enabled, the columns hold their configured widths. If those widths add up to less than the table width, the leftover space is not covered by any column cell. The container behind the cells is visible there, and it keeps the theme color. That leftover space is the white bar.

Check before moving on: widen the table in the Designer. If the white strip gets wider while the colored cells stay the same size, you have this problem.

Which element actually owns the white bar?

Confirm the layer in the browser before you change anything. The browser developer tools show exactly which element and which stylesheet produce the color.

1. Open the view in a Perspective session in Chrome or Edge.
2. Press F12 to open the developer tools, then use the element picker (the arrow icon).
3. Click inside the white strip, not on a column header cell.
4. In the Elements pane, find the highlighted node. It should be the ia_table__headContainer element, or a child of it that has no column cell above it.
5. In the Styles pane, find the background-color rule on that element. Note which file sets it. You should see the theme stylesheet, not a style you set in the Designer.

Check: if the picker lands on a column header cell instead, the cell style itself did not apply. Go back and check that column's header style before continuing.

Can a column fill the gap instead?

This is the fastest fix and needs no CSS. Let one column stretch to fill the unused width. Your column header styling then covers the whole row.

1. Choose the column that should absorb extra width. A description or name column is usually the best choice.
2. Set strictWidth to off on that column. Leave the other columns strict if their widths matter.
3. Check that the stretched column has the same header background as the others.

Turning strictWidth off on a single column removed the bar in the reported case.

Check: resize the table container wider and narrower. The header should stay a solid color across the full width at every size.

How do you recolor the header container itself?

The standard property editor does not expose a style for the parent header row. You have two options:

Use the project stylesheet. Here is a project-wide override. Note the leading dot on both class selectors:

.ia_table__headContainer,
.ia_table__footContainer {
    background-color: red !important;
}

A common mistake is dropping the leading dot on the first selector. Without the dot, the selector looks for an HTML tag with that name, finds nothing, and the header stays white. The footer still changes, which makes it look like the rule half-works.

Check: reload the session, then inspect the strip again with F12. Your stylesheet's rule should be active. The theme rule should appear crossed out.

How do you limit the override to specific tables?

A project-wide rule recolors every table. To target only some tables:

1. Create a style class in the project, for example styledTable. It can be empty.
2. Add that class to each table that should get the custom header color.
3. Write the CSS using the psc- prefix. Perspective adds this prefix to style class names in the page output.

.psc-styledTable .ia_table__headContainer,
.psc-styledTable .ia_table__footContainer {
    background-color: red !important;
}

Put the class prefix on both selectors. A comma starts a completely separate selector. If you write .psc-styledTable .ia_table__headContainer, .ia_table__footContainer, only the header is limited to your tables. The footer rule still applies to every table in the project.

Check: put a table with the class and a table without it on the same view. Only the classed table should change, in both the header and the footer.

Which configuration should you keep, and how do you prove it end to end?

Both fixes work. Choose based on how the table is used:

• Stretch a column if the columns should always fill the table. No CSS to maintain, and it follows theme changes automatically.
• Use the scoped CSS if every column must keep a fixed width, or the table can be wider than its columns. The container then matches the column headers no matter how much space is left over.
• Use both for fixed-width tables that sit in flexible layouts. The column fills normal gaps, and the container color covers any edge case.

1. Open the view in a live session, not only in the Designer preview.
2. Resize the browser from full width down to the narrowest size you support. The header should stay a single solid color.
3. Turn on the table footer, if you use it, and check that it has no white strip either.
4. If the project allows theme switching, change the session theme. With the column fix, the header should follow the new theme. With the CSS fix, it should keep your override color.
5. Open F12 one last time and click the far right of the header. The computed background-color should be your value, set by your rule or by the stretched column cell.

FAQ