/* ----------------------------------------- */ /* Visualiser le slug : projections - début */ /* ----------------------------------------- */ /* Save */ /* seo friendly tables */ .div-table { display: table; /* Defines a Table */ font-size: 14px; /*border-bottom: 1px solid pink;*/ margin: 0; width: 100%; } .table-container { display: table; width: 100%; } .table-head { display: table-header-group; /* Defines a table header group */ text-align: left; color: #CD9D5C; font-size: inherit; vertical-align: top; } .table-head .column, .table-row:nth-child(3) .column { /* Column inside the table-head */ color: #CD9D5C; font-weight:700; border-bottom: solid 1px #5a5c5c; width: 14.285%; } .table-row { display: table-row; /* Defines a table row */ padding: 3px 6px; border-collapse: collapse; text-align: left; vertical-align: top; } .table-row .column:nth-child(1) { /* First column in a row */ /* border-left: 1px solid yellow;*/ } .table-row:last-child .column { /* column in a last row */ border-bottom: none; } .table-row:hover { /* background: #333; */ } .column { display: table-cell; /* Defines a table cell */ padding: 8px 3px; border-bottom: 1px solid #5a5c5c; /* border-right: 1px solid green; */ vertical-align:top; } /* Responsive table */ @media all and (max-width:768px) { .div-table, .table-row, .column, .column:before { display: block; /* Converts a table, table row, table column and table column:before into a block element */ } .div-table, .table-row .column:last-child { border-bottom: none; } .table-head { position: absolute; /* Hides table head but not using display none */ top: -1000em; left: -1000em; } .table-row:nth-child(3) { /* TR TH */ position: absolute; /* Hides table head but not using display none */ top: -1000em; left: -1000em; } .table-row { /*border: 1px solid green; margin: 20px 0;*/ } .table-row .column { border-right:none; text-align: left; } .table-row .column:nth-child(1) { /* first column of the row */ border-left: none; border-right: none; } .table-row .column:last-child { /* last column of the row */ border-right: none; } .table-row:last-child .column, .column { /* Column in the last row and column */ border-bottom: 3px solid #142325; } .table-row:hover { /*background: #333;*/ } .column:before { /* prints the value of data-label attribute before the column data */ padding-right: 20px; content:"" attr(data-label)""; color: #CD9D5C; font-weight:700; /* call the attribute value of data-label and adds a string // */ } .column:hover { /*background: #333;*/ } } /* ----------------------------------------- */ /* Visualiser le slug : projections - fin */ /* ----------------------------------------- */