Question

我想显示2个内联表，所以我试图将其显示设置为内联。它失败了:(

将它们设置为内联显示的最简单方法是什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

试试这个。如果你想要2个内联样式的表，那么你必须先取外表。在该表的<td>中，您可以使用内部表<table>。

<table width="1000">
<tr>
<td>
<table border="1" width="500">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>
</td>
<td>
<table border="1" width="500">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>
</td>
</tr>
</table>

Answer 2

使用display:inline-table。

MDN Reference

内联表值在HTML中没有直接映射。它的行为类似于HTML元素，但是作为内联框，而不是块级框。表格框内部是块级上下文。

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>

Answer 3

如果您使用的是bootstrap，请尝试使用列结构。

如果不使用表格，请尝试 float 属性。

  table {
    float: left;
  }

here is an sample code in fiddle

如何使用内联样式显示两个表？

3 个答案: