Skip to content

Instantly share code, notes, and snippets.

@rafaehlers
Created November 5, 2018 20:36
Show Gist options
  • Save rafaehlers/99002d82834f88f217deb7cf113bca21 to your computer and use it in GitHub Desktop.
Save rafaehlers/99002d82834f88f217deb7cf113bca21 to your computer and use it in GitHub Desktop.
Change a Table view from horizontal to vertical
.gv-table-view thead {
display: none;
}
.gv-table-view tr {
display: block;
position: relative;
padding: 1.2em 0;
overflow-x: auto;
}
.gv-table-view tr:first-of-type {
border-top: 1px solid #ccc;
}
.gv-table-view td {
display: table-row;
}
.gv-table-view td:before {
content: attr( data-label );
font-weight: bold;
display: table-cell;
padding: 0.2em 0.6em 0.2em 0;
text-align: right;
width: 40%;
}
.gv-table-view td:last-child:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid #ccc;
width: 100%;
}
@rafaehlers
Copy link
Author

To target a specific Table View, just replace all instances of the .gv-table-view for .gv-container-5555 (where 5555 is the View ID) and that's it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment