显示内联其他内容的表格

Question

为什么我的表格不会与其他inline / inline-block内容一起显示？什么是最好的解决方案？

这是使用inline-block或inline-table应用于表格。

请注意，当您移除任何一个元素时，它们会显示在一条线上，就像您期望的那样没有多余的间距。

<div>
<a class="btn btn-xs">
  down too low
</a>
<table style="display:inline-block;">
<tbody>
  <td>
    <a class="btn btn-xs">
      up too high
    </a>
  </td>
</tbody>
</table>
</div>

Answer 1

在vertical-align: top;

上添加border-collapse: collapse;和table

.btn, .tbl {
  vertical-align: top;
}

.tbl {
  display:inline-block;
  border-collapse: collapse;
}

td, .tbl {
  padding: 0;
}

<div>
<a class="btn btn-xs">
  down too low
</a>
<table class="tbl">
<tbody>
  <td>
    <a class="btn btn-xs">
      up too high
    </a>
  </td>
</tbody>
</table>
</div>