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.
display: block; VS display: table;
As you can see from the demo below, the display: table;
applied on .clearfix::after
prevents the bottom margin of last child of clearfix
from collapsing with the bottom margin of clearfix
itself, while display: table;
still allows collapsing.
.clearfix_table,.clearfix_block { background-color: silver;}.clearfix_table::after,.clearfix_block::after { content: ""; clear: both;}.clearfix_table::after { display: table;}.clearfix_block::after { display: block;}
<div class="clearfix_table"> <p>text</p></div>
<hr>
<div class="clearfix_block"> <p>text</p></div>
display: inline-block vs display: table (no display: table-cell)
Ultimately, it depends on the use case:
display: inline-block
will create aninline-block
elementdisplay: table
will create atable
element
Here they are in use:
span.mySpan { background-color: red;}
<div> <span>A span element.</span> <span class="mySpan" style="display: table;">a <code>display: table</code> element.</span> <span>Another span element.</span></div>
<br/><br/>
<div> <span>A span element.</span> <span class="mySpan" style="display: inline-block;">a <code>display: inline-block</code> element.</span> <span>Another span element.</span></div>
What is the difference between inline-block and inline-table?
display:table
will make your tag behave like a table.inline-table
just means that the element is displayed as an inline-level table. You can then do table-cell
to let your element behave like a <td>
element.
display:inline
- displays your element as an inline element (like <span>
), and inline-block
will just group them together in a block container.
As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell
with inline-table
and not with inline-block
).
Check this link for more info on display
.
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 Property table-cell or inline-block
CSS styles are not semantic so you don't have to worry about that. It's more about what support you want. inline-block
and table-cell
are both supported up to 98% of browsers.
what should I use for display property of to arrange those elements inline.
Why not just use display: inline
?
CSS-clearfix: Why using table for the display-property?
Check out this SO question.
The display: table
was needed on earlier days because of browser compatibility. The linked question explains why display: block
is better than display: table
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.
How (and why) to use display: table-cell (CSS)
After days trying to find the answer, I finally found
display: table;
There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":
To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Similarly to get CSS to do it, you'd use the following:
HTML
<div id="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
#table{
display: table;
}
.tr{
display: table-row;
}
.td{
display: table-cell; }
As you can see in the example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!
#table {
display: table;
padding: 5px;
}
.tr {
display: table-row;
padding: 5px;
}
.td {
display: table-cell;
padding: 5px;
width: 150px;
border: #000000 solid 1px;
margin: 5px;
}
<div id="table">
<div class="tr">
<div class="td">Row 1,
<br />Column 1</div>
<div class="td">Row 1, Column 2</div>
<div class="td" style="background:#888888;"></div>
</div>
<div class="tr">
<div class="td">Row 2,
<br />Column 1</div>
<div class="td">Row 2, Column 2</div>
<div class="td" style="background:#888888;"></div>
</div>
</div>
Related Topics
How to Align a Label to The "Bottom" of a Div in CSS
CSS Grid with Variable Number of "Auto" Rows, But One Row Should Take "1Fr"
Angular2 Without Hash in The Url
How to Center Image in a Div Horizontally and Vertically
Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)
Are Void Elements and Empty Elements The Same
Question Mark in The Middle of a Url Variable
CSS Making Two Divs Equal Height with Display Table
Make Flex Container Take Width of Content, Not Width 100%
How to Use Z-Index with Relative Positioning
How Can Change Width of Dropdown List
Flexbox: Align Between Bottom and Center
Force Ie9 to Emulate Ie8. Possible
How to Center and Crop an Image to Always Appear in Square Shape with CSS
Selecting Siblings Between Two Nodes Using Xpath