Yeah it's too bad Google aren't implementing this. I just put together a little JavaScript bookmarklet for this purpose [here](https://gist.github.com/lmmx/184734b209f3b5c935c9#file-bookmarklet). Clicking once inserts a CSS style to hide the headers, clicking again removes the CSS and shows them again.

> `javascript:(function(){var hidecss = "body { margin-left: -45px;`
> `margin-top: -47px; } div.grid-table-container { width: 100%`
> `!important; }`
> `div.native-scrollbar.native-scrollbar-ltr.native-scrollbar-y { left:`
> `initial !important; right: 0px; }`
> `div.goog-inline-block.grid4-inner-container { width: 100% !important;`
> `}"; if (document.querySelector('#hidecss')===null){ var hidescript =`
> `document.createElement('style'); hidescript.type = 'text/css';`
> `hidescript.id = 'hidecss'; hidescript.innerHTML = hidecss;`
> `document.head.appendChild(hidescript); } else`
> `document.getElementById('hidecss').remove();})();`

May have to be tuned to other screen sizes but that's the gist of it !

**Edit** formatted JS:

    var hidecss = "body { margin-left: -45px; margin-top: -47px; } div.grid-table-container { width: 100% !important; } div.native-scrollbar.native-scrollbar-ltr.native-scrollbar-y { left: initial !important; right: 0px; } div.goog-inline-block.grid4-inner-container { width: 100% !important; }";
    if (document.querySelector('#hidecss')===null){
    	var hidescript = document.createElement('style');
    	hidescript.type = 'text/css';
    	hidescript.id = 'hidecss';
    	hidescript.innerHTML = hidecss;
    	document.head.appendChild(hidescript);
    }
    else document.getElementById('hidecss').remove();

It's an ugly hack since Google doesn't make webapps that play well with user modification like this, so it's only visual (trying to click on cells brings you to different cells and the highlighting is messed up). I ended up not using it