0
306
ViewsTabla HTML receptiva mientras se evita el bloque de visualización
Tengo un estilo de table que funciona bien cuando se le da suficiente espacio:
Sin embargo, cuando el ancho del contenedor principal no es lo suficientemente ancho, la tabla se oculta:
Puedo arreglar esto agregando display: block en la table . Esto agregará una barra de desplazamiento horizontal:
Sin embargo, esto hace que el encabezado no ocupe el espacio disponible cuando el contenedor principal es muy ancho:
¿Hay alguna manera de que aparezca la barra de desplazamiento cuando el contenedor principal es demasiado pequeño, hacer que el encabezado ocupe el espacio disponible y mantener la apariencia de la tabla?
:root { --global-title-color: black; --global-content-background-color: lightgreen; --global-background-color: lightblue; --global-border-color: red; --global-border-radius: 5px; --global-border-width-1: 1px; --global-font-size-1: 20px; --global-font-weight-bold: bold; --global-space-fixed-2: 5px; --global-space-fixed-3: 10px; } .container { display: block; background: yellow; resize: horizontal; overflow: hidden; min-height: 150px; } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; overflow: auto; width: 100%; thead { th { color: var(--global-background-color); background-color: var(--global-title-color); font-weight: var(--global-font-weight-bold); font-size: var(--global-font-size-1); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } th:first-child { border-top-left-radius: var(--global-border-radius); } th:last-child { border-top-right-radius: var(--global-border-radius); } } tbody { td { border-top: var(--global-border-width-1) solid var(--global-border-color); min-width: 100px; padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } tr:nth-child(2n) { background-color: var(--global-background-color); } tr:last-child { td:first-child { border-bottom-left-radius: var(--global-border-radius); } td:last-child { border-bottom-right-radius: var(--global-border-radius); } } } } <div class="container"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p> <table> <thead> <tr> <th>SDK</th> <th>Default namespaces</th> </tr> </thead> <tbody> <tr> <td>Microsoft.NET.Sdk</td> <td><code class="language-inline-text">System.Collections.Generic</code></td> </tr> <tr> <td>Microsoft.NET.Sdk.Web</td> <td><code class="language-inline-text">System.Net.Http.Json</code></td> </tr> </tbody> </table> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p> </div>Todo el código también está disponible en CodePen a continuación:
https://codepen.io/muhammadrehansaeed/pen/JjydLVV?editors=1100
·
Santiago Trujillo
2 answers
Answer question0
Pruebe esta solución con la tabla display: block; Sé que quieres evitar usar display: block; , pero para el pergamino, debe ser un contenedor estático. Como mencionaste anteriormente:
Sin embargo, esto hace que el encabezado no ocupe el espacio disponible cuando el contenedor principal es muy ancho.
Para solucionar esto, puede establecer el width: 0.1% .
th { width: 0.1%; white-space: nowrap; } :root { --global-title-color: black; --global-content-background-color: lightgreen; --global-background-color: lightblue; --global-border-color: red; --global-border-radius: 5px; --global-border-width-1: 1px; --global-font-size-1: 20px; --global-font-weight-bold: bold; --global-space-fixed-2: 5px; --global-space-fixed-3: 10px; } .container { display: block; background: yellow; resize: horizontal; overflow: hidden; min-height: 150px; } table { display: block; color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; overflow: auto; } th { width: 0.1%; white-space: nowrap; } th { color: var(--global-background-color); background-color: var(--global-title-color); font-weight: var(--global-font-weight-bold); font-size: var(--global-font-size-1); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; white-space: nowrap; } th:first-child { border-top-left-radius: var(--global-border-radius); } th:last-child { border-top-right-radius: var(--global-border-radius); } td { border-top: var(--global-border-width-1) solid var(--global-border-color); /* min-width: 100px; /* /* changed */ padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } tr:nth-child(2n) { background-color: var(--global-background-color); } tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } <div class="container"> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas. </p> <table> <thead> <tr> <th>SDK</th> <th>Default namespaces</th> <th>Values</th> <th>Default</th> <th>Other stuff</th> <th>#</th> <th>SDK</th> <th>Namespaces</th> </tr> </thead> <tbody> <tr> <td>Microsoft.NET.Sdk</td> <td> <code class="language-inline-text" >System.Collections.Generic</code > </td> <td>Values</td> <td> <code class="language-inline-text">Generic</code> </td> <td>Microsoft.NET.Sdk</td> <td> <code class="language-inline-text">00</code> </td> <td>NET.Sdk</td> <td> <code class="language-inline-text" >System.Collections.Generic</code > </td> </tr> <tr> <td>Microsoft.NET.Sdk.Web</td> <td> <code class="language-inline-text">System.Net.Http.Json</code> </td> <td>Web</td> <td> <code class="language-inline-text">System.Net.Http.Json</code> </td> <td>Microsoft.NET.Sdk.Web</td> <td> <code class="language-inline-text">33</code> </td> <td>Sdk.Web</td> <td> <code class="language-inline-text">Http.Json</code> </td> </tr> </tbody> </table> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas. </p> </div>
·
Santiago Trujillo
Report
0
Puedes eliminar display: block; en table y reemplace el overflow: hidden; con overflow: auto; en .container .
:root { --global-title-color: black; --global-content-background-color: lightgreen; --global-background-color: lightblue; --global-border-color: red; --global-border-radius: 5px; --global-border-width-1: 1px; --global-font-size-1: 20px; --global-font-weight-bold: bold; --global-space-fixed-2: 5px; --global-space-fixed-3: 10px; } .container { display: block; background: yellow; resize: horizontal; overflow: auto; min-height: 150px; } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; overflow: auto; width: 100%; thead { th { color: var(--global-background-color); background-color: var(--global-title-color); font-weight: var(--global-font-weight-bold); font-size: var(--global-font-size-1); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } th:first-child { border-top-left-radius: var(--global-border-radius); } th:last-child { border-top-right-radius: var(--global-border-radius); } } tbody { td { border-top: var(--global-border-width-1) solid var(--global-border-color); min-width: 100px; padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } tr:nth-child(2n) { background-color: var(--global-background-color); } tr:last-child { td:first-child { border-bottom-left-radius: var(--global-border-radius); } td:last-child { border-bottom-right-radius: var(--global-border-radius); } } } } <div class="container"> <table> <thead> <tr> <th>SDK</th> <th>Default namespaces</th> </tr> </thead> <tbody> <tr> <td>Microsoft.NET.Sdk</td> <td><code class="language-inline-text">System.Collections.Generic</code></td> </tr> <tr> <td>Microsoft.NET.Sdk.Web</td> <td><code class="language-inline-text">System.Net.Http.Json</code></td> </tr> </tbody> </table> </div>
·
Santiago Trujillo
Report
Answer question