Untitled diff
建立於 差異永不過期
/* --------------------------------------
/* --------------------------------------
table.css
table.css
Contient les elements pour l'affichage des tableaux HTML et responsive.
Contient les elements pour l'affichage des tableaux HTML et responsive.
- Affichage des tableaux basic
- Affichage des tableaux basic
- Table responsive basictable.js
- Table responsive basictable.js
--------------------------------------*/
-------------------------------------- */
/* -- Affichage des tableaux basic -- */
/* -- Affichage des tableaux basic -- */
/* --------------------------------- */
/* ---------------------------------- */
table {
table {
margin: 8px 0;
margin: 0.618em 0;
padding: 0;
padding: 0;
width: 100%;
width: 100%;
border-spacing: 0;
border-spacing: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
}
/* --- Entete du tableau --- */
/* --- Entete du tableau --- */
table caption {
table caption {
margin: 5px 0 5px 20px;
margin: 0.456em 0 0.456em 1.482em;
border-bottom: 1px solid #DDDDDD;
border-width: 0 0 1px;
color: #777777;
border-style: solid;
font-size: 13px;
border-color: transparent;
font-size: 0.8em;
text-align: left;
text-align: left;
}
}
table thead th,
table thead th,
.table-head {
.table-head {
padding: 8px;
padding: 0.228em;
background-color: #366493;
font-size: 0.9em;
color: #F1F1F1;
font-size: 1.1em;
text-align: center;
text-align: center;
font-weight: normal;
font-weight: normal;
}
}
table thead th a { color: #EEEEEE; }
table thead th a:hover { color: #FFFFFF; }
/* --- Contenu du tableau --- */
/* --- Contenu du tableau --- */
table tbody td,
table tbody td,
.table-element-container {
.table-element-container {
padding: 8px;
padding: 0.228em;
background-color: #F1F1F1;
font-size: 0.9em;
text-align: center;
border-width: 0 0 1px;
border-style: solid;
border-style: solid;
border-color: #DDDDDD;
border-color: transparent;
border-width: 1px 0 0 1px;
color: #777777;
text-align: center;
}
.table-element-container a {
color: #777777;
}
tr:nth-child(even) td {
background-color: #FAFAFA;
}
table tbody tr:last-child td {
border-bottom: 1px solid #DDDDDD;
}
table.bt tbody tr:last-child td {
border-bottom: none;
}
table.bt tbody tr:last-child td:last-child {
border-bottom: 1px solid #DDDDDD;
}
table tbody tr td:last-child {
border-right: 1px solid #DDDDDD;
}
table tbody tr.no-separator td {
border-top: none;
}
}
table tbody tr td.no-separator {
table.bt tbody tr td {
border-left: none;
border-bottom-width: 0;
}
}
table tbody tr td.no-separator:first-child {
table.bt tbody tr td:last-child {
border-left: 1px solid #DDDDDD;
border-width: 0 0 1px;
}
}
/* --- Pied de tableau --- */
/* --- Pied de tableau --- */
table tfoot tr th {
table tfoot tr td {
padding: 8px;
padding: 0.228em;
background-color: #F0F0F0;
font-size: 0.9em;
border-bottom: 1px solid #DDDDDD;
color: #AAAAAA;
}
table tfoot tr th:first-child {
border-left: 1px solid #DDDDDD;
}
table tfoot tr th:last-child {
border-right: 1px solid #DDDDDD;
}
}
table tfoot tr th:only-child {
table tfoot tr td:only-child {
text-align: right;
text-align: right;
}
}
table tfoot tr th * {
table tfoot tr td * {
vertical-align: middle;
vertical-align: middle;
}
}
table tfoot tr th a {
table tfoot tr td select {
color: #676A74;
padding: 0.1618 0.309em;
}
}
table tfoot tr th select {
@media (min-width: 769px) {
padding: 2px 5px;
table thead th,
table tbody td,
table tfoot tr td {
padding: 0.309em;
font-size: 1em;
}
}
}
/* --- Patch thead tableaux formates --- */
/* --- Patch thead tableaux formates --- */
table.formatter-table th.formatter-table-head {
table.formatter-table th.formatter-table-head {
padding: 8px;
padding: 0.618em;
background-color: #444444;
font-size: 1.482em;
color: #F1F1F1;
font-size: 1.4em;
text-align: center;
text-align: center;
font-weight: normal;
font-weight: normal;
}
}
table.formatter-table th.formatter-table-head a { color: #F1F1F1; }
table.formatter-table th.formatter-table-head a:hover { color: #FAFAFA; }
table.formatter-table th.formatter-table-head p {
table.formatter-table th.formatter-table-head p {
margin-bottom: 0;
margin-bottom: 0;
}
}
/* --- Taille des colonnes --- */
/* --- Taille des colonnes --- */
.col-smaller { width: 3em; }
.col-smaller { width: 3em; }
.col-small { width: 6em; }
.col-small { width: 6em; }
.col-large { width: 9em; }
.col-large { width: 9em; }
.col-larger { width: 12em; }
.col-larger { width: 12em; }
.col-xlarge { width: 15em; }
.col-xlarge { width: 15em; }
/* --- mini tableaux --- */
table.mini th,
table.mini td {
padding: 3px 1px;
font-size: 11px;
}
@media (max-width: 768px) {
table.mini th,
table.mini td {
padding: 7px 1px;
}
}
table.mini th a,
table.mini td a {
font-size: 11px;
}
/* --- Pagination footer tableaux --- */
table tfoot nav.pagination a {
color: #777777;
text-decoration: none;
padding: 3px 3px;
}
table tfoot nav.pagination a span.current-page {
color: #555555;
text-decoration: none;
}
/* --- Affichage des tableaux responsive sur les petits ecrans --- */
@media (max-width: 768px) {
table thead th,
table tbody td,
table tfoot tr th {
padding: 4px;
font-size: 0.9em;
}
}
/* -- Table responsive basictable.js -- */
/* -- Table responsive basictable.js -- */
/* ------------------------------------ */
/* ------------------------------------ */
table.bt thead th {
table.bt thead th {
display: none;
display: none;
}
}
table.bt thead th:first-child{
table.bt thead th:first-child{
display: block;
display: block;
}
}
table.bt tbody td {
table.bt tbody td {
display: block;
display: block;
width: 100%;
width: 100%;
border-right: 1px solid #DDDDDD;
text-align: left;
text-align: left;
vertical-align: top;
vertical-align: top;
}
}
table.bt tbody td.no-separator {
border-left: 1px solid #DDDDDD;
}
table.bt tbody td:before {
table.bt tbody td:before {
display: inline-block;
display: inline-block;
width: 35%;
width: 35%;
content: attr(data-th) " ";
content: attr(data-th) " ";
font-weight: bold;
font-weight: bold;
}
}
table.bt tbody td.bt-hide {
table.bt tbody td.bt-hide {
display: none;
display: none;
}
}
table.bt tbody td .bt-content {
table.bt tbody td .bt-content {
display: inline-block;
display: inline-block;
padding-left: 6px;
padding-left: 0.309em;
max-width: 100%;
max-width: 100%;
vertical-align: top;
vertical-align: top;
}
}
.bt-wrapper.active {
.bt-wrapper.active {
max-height: 310px;
max-height: 310px;
overflow: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
}