king yau king yau - 1 month ago 5
CSS Question

How to make two tables be shown with inline style?

I want to show 2 table inline, so i have tried to set its display to inline. It fails :(

What is the simplest way to set them to be shown inline?



table {
display: inline;
}
table, td, th {
border: 1px solid black;
}

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>




Answer

Use display:inline-table.

MDN Reference

Display Property at SO Documentation

The inline-table value does not have a direct mapping in HTML. It behaves like a HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

table {
  display: inline-table;
}
table,
td,
th {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>