Setting a table to display: block
Finally I found the answer by myself.
Put your table inside a wrapper container and write a CSS rule similar to this:
//HTML
<div class="wrapper-table">
<table>...</table>
</div>
//CSS
.wrapper-table > table
{
width: 100%;
}
Now the table will no longer overflow your layout and fits perfectly like most elements do.
Display block inside a table
You can get rid of the gap below the image and center it by setting the vertical-align property of the image to top and setting the text align to center on the table cell, not the image:
table { margin: 0 auto; width: 80%;}td { background-color: gray; text-align: center;}img { vertical-align: top;}<table> <tr> <td> <img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png"> </td> </tr></table>Responsive HTML Table While Avoiding Display Block
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>Display table with 'display: block;' at the center of a page
Would be better to use a wrapper for the table and add overflow to that wrapper not the table it self. This way you can control the behavior better.
And also use margin:0 auto on table to center it horizontally. No need for display:block
See below or better in jsFIddle
table { border: 2px solid red; width: 300px; margin: 0 auto;}
td { border: 1px solid red;}
.wrapper { width: 100%; overflow-x: auto;}<div class="wrapper"> <table> <tr> <td>a</td> <td>a</td> </tr> <tr> <td>a</td> <td>a</td> </tr> <tr> <td>a</td> <td>a</td> </tr> </table></div>Retain table layout while using block display for tbody
I found the solution. Adding width in viewports fixed it.
td.centerAlign {
text-align: center;
width: 100vw;
}
th.centerAlign {
width: 100vw;
text-align: center;
}
display: block squeezing table
#requestContents thead,#requestContents tbody{ display:table; width:100%;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <table class="table table-bordered table-condensed" id="requestContents" style="display: block; height: 90px; overflow-y: scroll"> <thead> <tr> <th width="20%">Request ID</th> <th width="20%">Request Type</th> <th width="20%">Blood Type</th> <th width="20%">Notice</th> <th width="20%">Request Date</th> </tr> </thead> <tbody> <tr> <td>Dummy Dat</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> </tr> <tr> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> </tr> <tr> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> <td>Dummy Data</td> </tr> </tbody> </table>CSS: display:block; vs display:table;
Comparing the two (block and table), I don't know of any core differences (there may be minor ones) you would see within a vacuum. I believe the major differences are specifically to children. Tables and their children have very different attributes/relationships than a div and its children.
As far as inline-block and inline-table see: What is the difference between inline-block and inline-table?
This article (http://css-tricks.com/almanac/properties/d/display/) has some interesting information, specifically regarding all the different display properties related to a table.
Why does not display:block and 100% width work on table rows?
This behavior has to do with how are tables treated on browsers.
The table element is set as display:table. The tr is a display:table-row, and the td is display:table-cell. It works the same if you are creating a div based css table.
On this fiddle: http://jsfiddle.net/rv4v2964/1/, I've created the same basic example, but with divs instead, and added a block element nested to the table, but off any row or cell.
You can notice that it stays limited to the first cell's width. One reason is stated in this article:
...the table and column widths are set by the widths of table and col elements or by the width of the first row of cells...
Meaning that when an element is odd to the table structure, the first cell's width set the value for the entire column. This is actually a table-layout behaviour specified on W3:
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
...a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column...
Another article mentions different behaviors on each browser on how to threat elements that are off the table structure. http://snook.ca/archives/html_and_css/getting_your_di
CONCLUSION
Browsers don't like when you create table, and place inside it elements that are not supposed to be there. It is likely to me rendered wrongly. It will take in count the first cell's width as its parameter.
On this specific case, a workaround may be setting the display as display: table-caption; that takes the whole width of the table. Then, setting the property caption-side as bottom, it will stay in the bottom of the table.
See here: http://jsfiddle.net/rv4v2964/2/
Reference: http://www.tagindex.net/css/table/caption_side.html
Related Topics
Customize Bootstrap 5 Text Color Contrast in Button
CSS 100 Percent Height Body and Element
Images Border-Radius Doesn't Work During CSS Transition
How to Make a Hard-Edged Gradient on a Large Element
Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu
When Should CSS Font-Family Value Use Quotes
Background-Image + Rgba() with Fallback in Ie 7-8
CSS with If/Then Browser Logic
Svg in Opera Using CSS Background-Image with Scaling
Fonts and Font Awesome Icons Not Loading Over Ssl