jquery-grid/css/grid.css

jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable datagrid, and will add advanced interaction controls to any HTML table. This plugin has build-in integration with Bootstrap and Material Design. Free

DIV.gj-grid-wrapper {
    margin: auto;
    position: relative;
    clear:both;
    z-index: 1;
}

TABLE.gj-grid {
    margin: auto;    
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

TABLE.gj-grid THEAD TH [data-role="selectAll"] {
    margin: auto;
}

TABLE.gj-grid THEAD TH [data-role="title"] {
    display: inline-block;
}

TABLE.gj-grid THEAD TH [data-role="sorticon"] {
    display: inline-block;
}

TABLE.gj-grid THEAD TH {
    overflow: hidden;
    text-overflow: ellipsis;
}

TABLE.gj-grid.autogrow-header-row THEAD TH {
    overflow: auto;
    text-overflow: initial;
    white-space: pre-wrap;
    -ms-word-break: break-word;
    word-break: break-word;
}

TABLE.gj-grid > tbody > tr > td {
    overflow: hidden;
    position: relative;
}

table.gj-grid tbody div[data-role="display"] {
    vertical-align: middle;
    text-indent: 0;
    white-space: pre-wrap;
    -ms-word-break: break-word;
    word-break: break-word;
}

table.gj-grid.fixed-body-rows tbody div[data-role="display"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -ms-word-break: initial;
    word-break: initial;
}

table.gj-grid tfoot DIV[data-role="display"] {
    vertical-align: middle;
    text-indent: 0;
    display: flex;
}

TABLE.gj-grid .fa {
    padding: 2px;
}

TABLE.gj-grid > tbody > tr > td > div {
    padding: 2px;
    overflow: hidden;
}

DIV.gj-grid-wrapper DIV.gj-grid-loading-cover
{
    background: #BBBBBB;
    opacity: 0.5;
    position: absolute;
    vertical-align: middle;
}

DIV.gj-grid-wrapper DIV.gj-grid-loading-text
{
    position: absolute;
    font-weight: bold;
}

/* Bootstrap Theme */
table.gj-grid-bootstrap thead th {
    background-color: #f5f5f5;
    vertical-align:middle;
}

table.gj-grid-bootstrap thead th [data-role="sorticon"] {
    margin-left: 5px;
}

table.gj-grid-bootstrap thead th [data-role="sorticon"] i.gj-icon,
table.gj-grid-bootstrap thead th [data-role="sorticon"] i.material-icons {
    position: absolute;
    font-size: 20px;
    top: 15px;
}

table.gj-grid-bootstrap tbody tr td div[data-role="display"] {
    padding: 0px;
}

.gj-grid-bootstrap-4 .gj-checkbox-bootstrap {
    display: inline-block;
    padding-top: 2px;
}

.gj-grid-bootstrap-4 tbody tr.active {
    background-color: rgba(0,0,0,.075);
}

/* Material Design Theme */
.gj-grid-md {
    position: relative;
    border: 1px solid #e0e0e0;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    background-color: #fff;
}

.gj-grid-md td:first-of-type, .gj-grid-md th:first-of-type {
    padding-left: 24px;
}

.gj-grid-md th {
    position: relative;
    vertical-align: bottom;
    font-weight: 700;
    line-height: 31px;
    letter-spacing: 0;
    height: 56px;
    font-size: 12px;
    color: rgba(0,0,0,.54);
    padding-bottom: 8px;
    box-sizing: border-box;
    padding: 12px 18px;
    text-align: right;
}

.gj-grid-md td {
    position: relative;
    height: 48px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 18px;
    box-sizing: border-box;
    text-align: left;
    color: rgba(0,0,0,.87);
}

.gj-grid-md tbody tr {
    position: relative;
    height: 48px;
    transition-duration: .28s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: background-color;
}

.gj-grid-md tbody tr:hover {
    background-color: #EEEEEE; /* Gray 200 */
}

.gj-grid-md tbody tr.gj-grid-md-select {
    background-color: #F5F5F5; /* Grey 100 */
}


table.gj-grid-md thead th [data-role="sorticon"] {
    margin-left: 5px;
}

table.gj-grid-md thead th [data-role="sorticon"] i.gj-icon,
table.gj-grid-md thead th [data-role="sorticon"] i.material-icons {
    position: absolute;
    font-size: 16px;
    top: 19px;
}

table.gj-grid-md thead th.gj-grid-select-all {
    padding-bottom: 3px;
}
/* Hide all prioritized columns by default */
@media only all {
	th.display-1120,
	td.display-1120,
	th.display-960,
	td.display-960,
	th.display-800,
	td.display-800,
	th.display-640,
	td.display-640,
	th.display-480,
	td.display-480,
	th.display-320,
	td.display-320 {
		display: none;
	}
}

/* Show at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
	TABLE.gj-grid-bootstrap th.display-320,
	TABLE.gj-grid-bootstrap td.display-320 {
		display: table-cell;
	}
}
/* Show at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
	TABLE.gj-grid-bootstrap th.display-480,
	TABLE.gj-grid-bootstrap td.display-480 {
		display: table-cell;
	}
}
/* Show at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
	TABLE.gj-grid-bootstrap th.display-640,
	TABLE.gj-grid-bootstrap td.display-640 {
		display: table-cell;
	}
}
/* Show at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
	TABLE.gj-grid-bootstrap th.display-800,
	TABLE.gj-grid-bootstrap td.display-800 {
		display: table-cell;
	}
}
/* Show at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
	TABLE.gj-grid-bootstrap th.display-960,
	TABLE.gj-grid-bootstrap td.display-960 {
		display: table-cell;
	}
}
/* Show at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
	TABLE.gj-grid-bootstrap th.display-1120,
	TABLE.gj-grid-bootstrap td.display-1120 {
		display: table-cell;
	}
}

/* Material Design Theme */
.gj-grid-md tfoot tr th {
    padding-right: 14px;
}

.gj-grid-md tfoot tr[data-role="pager"] .gj-grid-mdl-pager-label {
    padding-left: 5px;
    padding-right: 5px;
}

.gj-grid-md tfoot tr[data-role="pager"] .gj-dropdown-md {
    margin-left: 12px;
}

.gj-grid-md tfoot tr[data-role="pager"] .gj-dropdown-md [role="presenter"] {
    font-size: 12px;
    font-weight: bold;
    color: rgba(0,0,0,.54);
}

.gj-grid-md tfoot tr[data-role="pager"] .gj-dropdown-md [role="presenter"] [role="display"] {
    text-align: right;
}

.gj-grid-md tfoot tr[data-role="pager"] .gj-grid-md-limit-select {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(0,0,0,.54);
}

/* Bootstrap */
.gj-grid-bootstrap tfoot tr[data-role="pager"] th {
    line-height: 30px;
    background-color: #f5f5f5;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th > div > div {
    margin-right: 5px;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th > div > button {
    margin-right: 5px;
}

.gj-grid-bootstrap-4 tfoot tr[data-role="pager"] th > div button {
    height: 34px;
}

.gj-grid-bootstrap-4 tfoot tr[data-role="pager"] th div .gj-dropdown-bootstrap-4 .gj-dropdown-expander-mi .gj-icon {
    top: 5px;
}

.gj-grid-bootstrap-3 tfoot tr[data-role="pager"] th > div > input {
    margin-right: 5px;
    width: 40px;
    text-align: right;
    display: inline-block;
    font-weight: bold;
}

.gj-grid-bootstrap-4 tfoot tr[data-role="pager"] th > div > div.input-group {
    width: 40px;
}

.gj-grid-bootstrap-4 tfoot tr[data-role="pager"] th > div > div.input-group input {
    text-align: right;
    font-weight: bold;
    height: 34px;
    padding-top: 2px;
    padding-bottom: 6px;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th > div > select {
    display: inline-block;
    margin-right: 5px;
    width: 60px;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th .gj-dropdown-bootstrap .gj-list-bootstrap [data-role="display"] {
    line-height: 14px;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th .gj-dropdown-bootstrap [role="presenter"] [role="display"] {
    font-weight: bold;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th .gj-dropdown-bootstrap-3 [role="presenter"] {
    padding: 2px 8px;
}

.gj-grid-bootstrap tfoot tr[data-role="pager"] th .gj-dropdown-bootstrap-4 [role="presenter"] {
    padding: 1px 8px;
}
.gj-grid thead tr th div.gj-grid-column-resizer-wrapper {
    position: relative;
    width: 100%;
    height: 0px; 
    top: 0px; 
    left: 0px; 
    padding: 0px;
}

span.gj-grid-column-resizer {
    position: absolute;
    right: 0px;
    width: 10px;
    top: -100px;
    height: 300px;
    z-index: 1203;
    cursor: e-resize;
}

.gj-grid-resize-cursor {
    cursor: e-resize;
}
.gj-grid-md tbody tr.gj-grid-top-border td {
  border-top: 2px solid #777;
}
.gj-grid-md tbody tr.gj-grid-bottom-border td {
  border-bottom: 2px solid #777;
}

.gj-grid-bootstrap tbody tr.gj-grid-top-border td {
  border-top: 2px solid #777;
}
.gj-grid-bootstrap tbody tr.gj-grid-bottom-border td {
  border-bottom: 2px solid #777;
}
.gj-grid-md thead tr th.gj-grid-left-border,
.gj-grid-md tbody tr td.gj-grid-left-border
{
    border-left: 3px solid #777;
}
.gj-grid-md thead tr th.gj-grid-right-border,
.gj-grid-md tbody tr td.gj-grid-right-border
{
    border-right: 3px solid #777;
}

.gj-grid-bootstrap thead tr th.gj-grid-left-border,
.gj-grid-bootstrap tbody tr td.gj-grid-left-border
{
    border-left: 5px solid #ddd;
}
.gj-grid-bootstrap thead tr th.gj-grid-right-border,
.gj-grid-bootstrap tbody tr td.gj-grid-right-border
{
    border-right: 5px solid #ddd;
}
.gj-dirty {
    position: absolute;
    top: 0px;
    left: 0px;
    border-style: solid;
    border-width: 3px;
    border-color: #f00 transparent transparent #f00;
    padding: 0;
    overflow: hidden;
    vertical-align: top;
}

/* Material Design */
.gj-grid-md tbody tr td.gj-grid-management-column {
    padding: 3px;
}

.gj-grid-md tbody tr td[data-mode="edit"] {
    padding: 0px 18px;
}

.gj-grid-md tbody .gj-dropdown-md [role="presenter"] [role="display"] {
    padding: 0px;
}

/* Bootstrap */
.gj-grid-bootstrap tbody tr td[data-mode="edit"] {
    padding: 0px;
}

.gj-grid-bootstrap tbody tr td[data-mode="edit"] [data-role="edit"] {
    padding: 0px;
}

/* Bootstrap 3 */
.gj-grid-bootstrap-3 tbody tr td.gj-grid-management-column {
    padding: 3px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] {
    height: 38px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] [data-role="edit"] input[type="text"] {
    height: 37px;
    padding: 8px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] .gj-dropdown-bootstrap [role="presenter"] {
    border: 0px;
    border-radius: 0px;
    height: 37px;
    padding-left: 8px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap {
    height: 37px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="input"] {
    height: 37px;
    border:0px;
    border-radius: 0px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="right-icon"] {
    border:0px;
    border-radius: 0px;
}

.gj-grid-bootstrap-3 tbody tr td[data-mode="edit"] .gj-checkbox-bootstrap {
    display: inline-block;
    padding-top: 10px;
    height: 32px;
}

/* Bootstrap 4 */
.gj-grid-bootstrap-4 tbody tr td.gj-grid-management-column {
    padding: 6px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] [data-role="edit"] input[type="text"] {
    height: 48px;
    padding-left: 12px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-dropdown-bootstrap [role="presenter"] {
    border: 0px;
    border-radius: 0px;
    height: 48px;
    padding-left: 12px;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-dropdown-bootstrap-4 [role="expander"].gj-dropdown-expander-mi .gj-icon,
.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-dropdown-bootstrap-4 [role="expander"].gj-dropdown-expander-mi .material-icons {
    top: 13px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap {
    height: 48px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="input"] {
    height: 48px;
    border:0px;
    border-radius: 0px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="right-icon"] {
    background-color: #fff;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="right-icon"] button {
    border: 0px;
    border-radius: 0px;
    width: 43px;
    position: relative;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="right-icon"] .gj-icon,
.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-datepicker-bootstrap [role="right-icon"] .material-icons {
    top: 13px;
    left: 10px;
    font-size: 24px;
}

.gj-grid-bootstrap-4 tbody tr td[data-mode="edit"] .gj-checkbox-bootstrap {
    display: inline-block;
    padding-top: 15px;
    height: 42px;
}
.gj-grid-md thead tr[data-role="filter"] th {
    border-top: 1px solid #e0e0e0;
}

div.gj-grid-wrapper div.gj-grid-bootstrap-toolbar {
    background-color: #f5f5f5;
    padding: 8px;
    font-weight: bold;
    border: 1px solid #ddd;
}

div.gj-grid-wrapper div.gj-grid-bootstrap-4-toolbar {
    background-color: #f5f5f5;
    padding: 12px;
    font-weight: bold;
    border: 1px solid #ddd;
}

div.gj-grid-wrapper div.gj-grid-md-toolbar {
    font-weight: bold;
    font-size: 24px;
    font-family: "Helvetica","Arial",sans-serif;
    background-color: rgb(255, 255, 255);
    
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 0px;
    border-collapse: collapse;

    padding: 0 18px 0px 18px;
    line-height: 56px;
}
table.gj-grid-scrollable tbody {
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

/* Material Design */
table.gj-grid-md.gj-grid-scrollable {
    border-bottom: 0px;
}

table.gj-grid-md.gj-grid-scrollable tbody {
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

table.gj-grid-md.gj-grid-scrollable tfoot {
    border-bottom: 1px solid #e0e0e0;
}

/* Bootstrap 3 */
table.gj-grid-bootstrap.gj-grid-scrollable {
    border-bottom: 0px;
}

table.gj-grid-bootstrap.gj-grid-scrollable tbody {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

table.gj-grid-bootstrap.gj-grid-scrollable tbody tr[data-role="row"]:first-child td {
    border-top: 0px;
}

table.gj-grid-bootstrap.gj-grid-scrollable tbody tr[data-role="row"] td:first-child {
    border-left: 0px;
}

table.gj-grid-bootstrap.gj-grid-scrollable tbody tr[data-role="row"] td:last-child {
    border-right: 0px;
}

table.gj-grid-bootstrap.gj-grid-scrollable tfoot {
    border-bottom: 1px solid #ddd;
}