Question

假设我使用bootstrap有两个不同的表：

<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td></td>
</tr>
</tbody>
</table>

<table class="table">
<tbody>
<tr>
<td>Favorites:</td>
<td></td>
</tr>
</tbody>
</table>

我使用bootstrap，我怎样才能使两个表都对齐？两个表每个只有2列。我希望第二列垂直匹配。它的随机性如此广泛。

因此，假设第一个表格的第二列在页面中心对齐

但是第二个表的第二列是页面的右边。

It looks like this

Answer 1

您可以将两个表放在一行中，然后将每个表放在它们自己的容器中，每个表都有一个col-6

类

Answer 2

使用Bootstrap

  <table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

或者您可以使用CSS

Answer 3

没关系，我解决了。只需要在我的表格分区中添加Style属性。

<table class="table">
<tbody>
<tr>
<td style="width:50%;">Name:</td>
<td></td>
</tr>
</tbody>
</table>

<table class="table">
<tbody>
<tr>
<td style="width:50%;">Favorites:</td>
<td></td>
</tr>
</tbody>
</table>

现在是第二列，我打印出的所有变量都会相互对齐。

如何在codeigniter引导程序中对齐两个不同的表

3 个答案: