[{"ID":"BC0C2187-E637-4AAA-B788-2441F508CD18","title":"Rendre un tableau responsive","tags":"astuce css html","date":"11\/04\/2023","timestamp":"1681230889","rss_date":"Sat, 04 Nov 2023 183449 +0100","status":"public","dependency":"","source":"https:\/\/bookmarks.ecyseo.net\/?7GsEgg","content":" \r\n \r\n \r\n \r\n \r\n
Date<\/th>\r\n Horaire<\/th>\r\n Ev\u00e8nement<\/th>\r\n <\/tr>\r\n <\/thead>\r\n\r\n
Le #_EVENTDATES<\/td>\r\n #_EVENTTIMES<\/td>\r\n #_EVENTLINK<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\ntable caption {\r\n display: none;\r\n}\r\n\r\n@media all and (max-width:500px){\r\n table{\r\n width:100%;\r\n }\r\n\r\n table caption {\r\n display: block;\r\n background-color: #484d55;\r\n color:white;\r\n }\r\n\r\n .table thead {\r\n display: none;\r\n }\r\n\r\n .table tr{\r\n display: block;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .table td {\r\n display: block;\r\n text-align: right;\r\n }\r\n\r\n .table td:before {\r\n content: attr(data-label);\r\n float: left;\r\n font-weight: bold;\r\n }\r\n}"},{"ID":"21AF6C10-9BF6-4375-A753-1E1B81382C8E","title":"arborescence en css uniquement","tags":"css html","date":"11\/01\/2023","timestamp":"1673431849","rss_date":"Wed, 01 Nov 2023 11:10:49 +0100","status":"public","dependency":"","source":"https:\/\/blog.shevarezo.fr\/post\/2023\/01\/10\/creer-arborescence-css-uniquement","content":" .tree {\r\n --spacing: 1.5rem;\r\n --radius: 10px;\r\n --marker-bg-default: #ddd;\r\n --marker-bg-haschild: #6b9abb;\r\n line-height: 2rem;\r\n}\r\n.tree li {\r\n display: block;\r\n position: relative;\r\n padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);\r\n}\r\n.tree ul {\r\n margin-left: calc(var(--radius) - var(--spacing));\r\n padding-left: 0;\r\n}\r\n.tree ul li {\r\n border-left: 2px solid #ddd;\r\n}\r\n.tree ul li:last-child {\r\n border-color: transparent;\r\n}\r\n.tree ul li::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n top: calc(var(--spacing) \/ -2);\r\n left: -2px;\r\n width: calc(var(--spacing) + 2px);\r\n height: calc(var(--spacing) + 1px);\r\n border: solid #ddd;\r\n border-width: 0 0 2px 2px;\r\n}\r\n.tree summary {\r\n display: block;\r\n cursor: pointer;\r\n}\r\n.tree summary::marker,\r\n.tree summary::-webkit-details-marker {\r\n display: none;\r\n}\r\n.tree summary:focus {\r\n outline: none;\r\n}\r\n.tree summary:focus-visible {\r\n outline: 1px dotted #000;\r\n}\r\n.tree li::after,\r\n.tree summary::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n top: calc(var(--spacing) \/ 2 - var(--radius) + 2px);\r\n left: calc(var(--spacing) - var(--radius) - 2px);\r\n width: calc(2 * var(--radius));\r\n height: calc(2 * var(--radius));\r\n border-radius: 50%;\r\n background: var(--marker-bg-default);\r\n}\r\n.tree summary::before {\r\n content: \"+\";\r\n z-index: 1;\r\n background: var(--marker-bg-haschild);\r\n color: #fff;\r\n line-height: calc(2 * var(--radius));\r\n text-align: center;\r\n}\r\n.tree details[open] > summary::before {\r\n content: \"\u2212\";\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    \r\n
  • \r\n
    \r\n Informatique<\/summary>\r\n
      \r\n
    • \r\n
      \r\n P\u00e9riph\u00e9riques<\/summary>\r\n
        \r\n
      • Clavier<\/li>\r\n
      • Souris<\/li>\r\n
      • Ecran<\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n
      • \r\n
        \r\n Stockage<\/summary>\r\n
          \r\n
        • Disque dur<\/li>\r\n
        • SSD<\/li>\r\n
        • Cl\u00e9 USB<\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n
        • \r\n
          \r\n Composants<\/summary>\r\n
            \r\n
          • Processeur<\/li>\r\n
          • Carte m\u00e8re<\/li>\r\n
          • M\u00e9moire<\/li>\r\n
          • \r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n
          • \r\n
            \r\n Composants<\/summary>\r\n
              \r\n
            • Processeur<\/li>\r\n
            • Carte m\u00e8re<\/li>\r\n
            • M\u00e9moire<\/li>\r\n
            • Carte graphique<\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n<\/ul>\r\n<\/code><\/pre> codeCarte graphique<\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n <\/ul>\r\n <\/details>\r\n <\/li>\r\n<\/ul>"},{"ID":"02124AB6-4AA3-45B9-B8C1-87C7D2EAAFD0","title":"touche de clavier en CSS","tags":"css html","date":"12\/11\/2022","timestamp":"1668247688","rss_date":"Sun, 11 Dec 2022 11:08:08 +0100","status":"public","dependency":"","source":"","content":"