#map { height: calc(90% - 44px); width: 98% !important; margin-left: auto; margin-right: auto; /*position: absolute !important;*/ } .specialWidth { width: 100px; } table, thead, tbody, th, td { font-family: "Montserrat", sans-serif; font-weight: bold; border: #691c32 solid 1px; border-collapse: collapse; font-size: 12px; } th { text-align: right; /* width: 180px; */ background: #691c32; color: white; padding: 5px; } td { background-color: white; } th, td { text-align: center; } .centerText { text-align: center; } .headerContainer { background-color: #691c32; color: white; margin-bottom: 1px; padding: 1px; } #title { text-align: center; } #tableSitios td { background-color: #ffffff; } /* tabla sticky thead test */ #tableSitios { table-layout: fixed; border-collapse: collapse; } #tableSitios tbody { display: block; overflow: auto; width: auto; height: 400px; } #tableSitios thead tr { display: block; } #tableSitios th, #tableSitios td { width: 100px; border: 1px solid #000000; } /* tabla flotante */ #tableContainerSitios { /* nuevo inicio */ /* overflow: auto; */ height: 400px; /* nuevo fin */ position: absolute; z-index: 1; top: 25%; padding-left: 5px; /* */ } #contImgDownloads { display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: "nsitios nsitios nsitios" "csvDescarga jsonDescarga txtDescarga"; justify-items: center; align-items: center; padding: 10px; /* Estilos */ background-color: #691c32; font-size: 20px; color: #ffffff; font-weight: bolder; border-radius: 8px; margin-bottom: 8px; } #nsitios { grid-area: nsitios; } #jsonDescarga { grid-area: jsonDescarga; } #csvDescarga { grid-area: csvDescarga; } #txtDescarga { grid-area: txtDescarga; } #map { position: absolute; z-index: -1; width: 100%; } #csvDescarga, #jsonDescarga, #txtDescarga { cursor: pointer; } /* #contenedorMapa { display: grid; grid-template-columns: 15% 85%; } */ /* inicio table vertical test */ /* https://codepen.io/veekungx/pen/MWgvBxe?editors=1100 */ .vertical { display: -ms-grid; -ms-grid-rows: auto auto; -ms-grid-columns: auto auto; display: grid; grid-template-columns: min-content min-content; grid-template-rows: auto auto; grid-template-areas: "caption caption" "head body"; } .vertical thead { grid-area: head; display: flex; flex-shrink: 0; min-width: min-content; -ms-grid-row: 2; -ms-grid-column: 1; } .vertical tbody { grid-area: body; display: flex; -ms-grid-row: 2; -ms-grid-column: 2; } .vertical tr { display: flex; flex-direction: column; min-width: min-content; flex-shrink: 0; } .vertical td, .vertical th { display: block; } .vertical caption { display: block; -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: caption; } /* fin table vertical test */ @media screen and (min-width: 0px) and (max-width:720px) { #tableContainerSitios { /* nuevo inicio */ /* overflow: auto; */ height: 400px; /* nuevo fin */ position: relative; top: 3px; /*z-index: 1;*/ /*top: 25%;*/ } #tableSitios { margin-left: auto; margin-right: auto; } #tableSitios tbody { height: 225px; } #contImgDownloads { grid-area: contImgDownloads; } }