Can column headers be hidden via CSS?

Interesting question, Paulus. Which I'm sure many will find interesting because everybody is always looking for ways to optimize the usage of screen real-estate.
I don't think having a more finely divided grid would (really) help. There's always something that just does or does not fit for any sizing. 
Personally I'd rather see an option that allows a grid area to take up as much space as needed (by its content). Something we're working on as a feature for the new Page layout functionality that Gertjan has already announced in his Product Owner update. So hang on in 2020.

But, right now, to make more use of the space within the (table) widget, solely by using custom styling, I see two approaches, as far as I'm concerned.

• hide the entire widget header/title (but for non-developers only of course, and when no other actions are needed from the header: you will lose access to all that when hiding this part)
• hide the row and grid headers

The first is pretty easy to achieve. 

html:not(.developer-mode) .widgetdiv [data-widget\.uri="YourWidgetURIHere"] .awf-dock.top {
    display: none;
}

Replace 'YourWidgetURIHere' with your own widget's uri, of course.
Find it by inspecting the title bar with your browser's developer tool and going up the element tree to the <div> that has the aimms-widget class on it too. It will have the data-widget.uri attribute.

Please note that due to the period in the data-widget.uri attribute name, we have to escape it in our css by preceding it with a backslash… Something I overlooked when first answering this.

If you know how to work with annotations, you could use that approach too and replace the [data-widget\.uri="YourWidgetURIHere"] part with the class that your annotation yields.

Hiding the part that you actually requested to hide, the headers above the table, seems obvious but currently isn't, because there is quite a bit of explicit (and dynamic) sizing going on.
So in order to urge the contents to align to the very top, we need to override some styling:

[data-widget\.uri="YourWidgetURIHere"] .titleheader-viewport,
[data-widget\.uri="YourWidgetURIHere"] .colheader-viewport {
    display: none;
}

[data-widget\.uri="YourWidgetURIHere"] .rowheader-viewport,
[data-widget\.uri="YourWidgetURIHere"] .gridheader-viewport {
    top: 0!important;
}

[data-widget\.uri="YourWidgetURIHere"] .right .ui-scrollbar {
    top: 0!important;
    height: 100%!important;
}

Doing this will hide the sorting options for any columns too, since they're part of the hidden headers.

As usual I do have to ask you to make very sure that your app keeps working as intended. 
I only did a superficial trial of this on a simple model. So check if you can still interact with everything.

See if this gets you where you want. If not, check back here because there might be more creativity to add.

In the meantime we hope to help you (and everybody) with nicer page layout options next year! (and sorry, no specific due date yet on that specific feature)

Regarding page layout upcoming changes Edo mentioned, see the December product update for more details - and keep an eye on discussions in the Roadmap forum ;)

Hi @Edo Nijmeijer,

Thanks for your suggestions!

Unfortunately, your second suggestion is not 100% working, since it doesn’t move the data up. Causing the data and row headers to mis-align.

To make clear to you (and others reading this) what the effect is, let me share some screenshots. 

Original:

Removing the title bar - @Edo Nijmeijer first suggestion:
 

Removing the column headers - @Edo Nijmeijer second suggestion, causes a misalignment of row headers and data:

If you have a suggestion on how to solve the alignment, that would be much appreciated!