Menu
I have a table style that renders fine when its given enough space:
However, when the width of the parent container is not wide enough the table is hidden:
I can fix this by adding display: block on the table. This will add a horizontal scrollbar:
However, this causes the header to not take up available space when the parent container is very wide:
Is there a way I can get the scrollbar to appear when the parent container is too small, get the header to take up the available space and maintain the look and feel of the table?
: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>All code is also available in the CodePen below:
https://codepen.io/muhammadrehansaeed/pen/JjydLVV?editors=1100
871
The primary method of making a responsive table is to add a class table table-responsive inside the table tag. To make a table responsive, we wrap the whole table inside a container tag like div with property overflow-x equals to auto .
The best way to do this would be with div s and using CSS' display: table , display: table-row and display: table-cell properties, along with some breakpoints. Otherwise, you're going to have a lot of ugly code. This isn't the semantically greatest solution, but as far as responsive goes, it does work.
You can make tables responsive. Responsive tables will become smaller when possible. If not possible, they can read just their format so that mobile users can still read and use them. Like other website elements, tables should be responsive.
35. Which of the following is the correct approach to make a table responsive? Answer: A) Adding a container element (like <div>) with overflow-x:auto around the <table> element will make it responsive.
Try this solution with the table display: block; I know you want to avoid using display: block;, but for the scroll, must be a static container. As you mentioned above:
However, this causes the header to not take up available space when the parent container is very wide
To fix this you can set the header cell 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>You can remove display: block; on table and replace overflow: hidden; with overflow: auto; on .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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
