#partial-correlations-form { width: 100%; display: grid; grid-column-gap: 1em; } #main-form { grid-column-start: 1; grid-column-end: 2; text-align: left; } #form-display-area { grid-column-start: 2; grid-column-end: 3; } #part-corr-success { grid-column-start: 1; grid-column-end: 3; } td, th { border: 1px solid; text-align: left; padding: 0.2em 0.5em 0.2em 0.7em; } tr:nth-of-type(2n) { background: #F9F9F9; } .with-trait { margin-left: 0.7em; position: relative; display: grid; width: 100%; grid-column-gap: 1em; grid-template-columns: 1em 1fr; text-align: left; } .with-trait:nth-of-type(2n) { background: #E5E5FF; } .with-trait .selector-element { grid-column: 1 / 2; grid-row: 1 / 1; } .with-trait:first-of-type { padding-top: 2.5em; } .with-trait:first-of-type label *:before{ position: absolute; top: 0px; text-transform: capitalize; font-weight: bolder; content: attr(data-title); background: #336699; /*#FFCCCC;*/ color: #FFFFFF; padding: 0.5em; } .with-trait .label-element { display: grid; grid-column-gap: 0.5em; grid-template-columns: 4fr 2fr 2fr 9fr 2fr 1fr 2fr; grid-column: 2 / 2; grid-row: 1 / 1; } .with-trait .label-element .trait-dataset { grid-column: 1; grid-row: 1 / 1; } .with-trait .label-element .trait-name { grid-column: 2; grid-row: 1 / 1; } .with-trait .label-element .trait-symbol { grid-column: 3; grid-row: 1 / 1; } .with-trait .label-element .trait-description { grid-column: 4; grid-row: 1 / 1; } .with-trait .label-element .trait-location { grid-column: 5; grid-row: 1 / 1; } .with-trait .label-element .trait-mean-expr { grid-column: 6; grid-row: 1 / 1; } .with-trait .label-element .trait-max-lrs { grid-column: 7; grid-row: 1 / 1; }