Table Header Alignment

[ramoneguru]

I have a table element and the headers in it are mostly fine, but I have one header that requires a sub-heading (image below)

Notice that the headers don't quite align (sub-heading is throwing things off a touch). How can I go about aligning all the headers and still keep that sub-heading text?

[SiTaggart]

If we don't already, we might need to expose vAlign on the Th so you can set vertical align top.

I think that should do what you're after?

Can you inspect with web tools, manually apply vertical-align: top to the <th /> and we if it gives you the desired effect?

[ramoneguru]

Yeah, manually applied to all and then centered the "Capabilites" text (text-align is already exposed). Seems to work

[SiTaggart]

Actually, we don't need to do anything. You can set verticalAlign on the row and the Th inherits

https://codesandbox.io/s/double-headers-n2luo?file=/src/index.tsx