Question

0

297

Visualizações

Tabla 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

over 4 years ago · Santiago Trujillo

2 Respostas

Responde à pergunta

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>

over 4 years ago · Santiago Trujillo Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-03-07T22:22:07.916Z

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>

0

297

Tabla HTML receptiva mientras se evita el bloque de visualización

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT