Skip to main content
added 649 characters in body
Source Link

Yeah it's too bad Google aren't implementing this. I just put together a little JavaScript bookmarklet for this purpose here. 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

Yeah it's too bad Google aren't implementing this. I just put together a little JavaScript bookmarklet for this purpose here. 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 !

Yeah it's too bad Google aren't implementing this. I just put together a little JavaScript bookmarklet for this purpose here. 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

Source Link

Yeah it's too bad Google aren't implementing this. I just put together a little JavaScript bookmarklet for this purpose here. 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 !