Display:Inline-Table

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.

display: inline-block vs display: table (no display: table-cell)

Ultimately, it depends on the use case:

• display: inline-block will create an inline-block element
• display: table will create a table 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>

CSS table display: inline-block

You can achieve that using div and media query like so. Check out the effect on full page.

.custom-table{width: 100%; border: 5px solid black;text-align: center; border-collapse: collapse;max-width: 300px;} .right-column{width: 20%; border: 3px solid lightblue;} .middle-column{width: 40%; border: 3px solid lightblue;} .left-column{width: 40%; border: 3px solid lightblue;}

.table1-box, .table2-box{  width: 50%;  float: left;}
@media (max-width:800px){ .table1-box, .table2-box{   width: 100%;   margin-bottom:30px; }
}

<div class="table1-box"><table class="custom-table" dir="rtl"> <tr class="custom-row">  <td class="custom-column right-column">   777  </td>  <td class="custom-column middle-column">   888  </td>  <td class="custom-column left-column">   999  </td> </tr></table></div>
<div class="table2-box">
<table class="custom-table" dir="rtl"> <tr class="custom-row">  <td class="custom-column right-column">   777  </td>  <td class="custom-column middle-column">   888  </td>  <td class="custom-column left-column">   999  </td> </tr></table></div>

How do I make an HTML table inline

Making the paragraph display: inline; works for me. But, if you have multiple paragraphs, you will have to add a <br /> after each of them.

How do I make my inline-block table expand to 100% width?

I don't think using a table and set it's display: inline-block is a good idea, revise it with display: table; width: 100% in CSS should make it fill the width, also I would wrap it inside a <div class="container"> for better CSS maintenance

See the example: https://jsfiddle.net/Zay_DEV/a5zwgjz3/

Bonus -

This example should implemented what all you want: https://jsfiddle.net/Zay_DEV/a5zwgjz3/2/

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 inline-table and table cell alignment of elements

The float css property can be used

Try this:

<span style="float:left;background: #FFDEAC 0% 0% no-repeat padding-box;border-radius: 2px;padding:10px 20px;margin-top: 10px;">donate now</span>

css margin auto display inline-table

Because margin: auto only works with a defined width. Otherwise the browser doesn't know how to calculate the distance from each side. And yes an alternative to using margin would be to use display: inline-block and adding text-align: center to the parent.

How to put a table inside an inline-block element where cells have a percentage width

How about using div { inline-table } rather than div { inline-block }

See http://jsfiddle.net/Z7Car/3/

---

Related Topics