如何将（多个）表格对齐（并响应）？

Posted 2023-03-06

【中文标题】如何将（多个）表格对齐（并响应）？

【英文标题】：How to align (multiple) tables as centered (and responsively)?

【发布时间】：2019-07-10 12:52:37

【问题描述】：

我正在尝试水平对齐两个（以后可能更多）表。 我也在尝试将其作为我从 CMS 使用的模板的一部分。

上述解决方案位于：

html how to align two tables in one row? HTML -- two tables side by side

对我不起作用。

嗯，首先，div 和 table 的“混合”在其他帖子（例如 https://www.sitepoint.com/community/t/how-to-place-two-tables-side-by-side/6499/5）上被忽略为不好的做法。

另外，使用时

body 
  text-align:center;

这实际上意味着，所有文本（也在段落中）显示为居中。这不是我想要的。

我的代码源自 CMS 的模板。关于表格，默认情况下是这样的：

table 
    border-collapse:collapse;


table.table 
    clear:both;
    border-collapse:collapse;
    border-top: 1px solid #666;
    margin: 20px 0 5px 0;
    width:100%;*/
    font: 0.85em;

然后我想，我会再上两节课：

table.beirat_l, table.beirat_r,
margin: 25px auto 25px auto;
display:inline-table;
float: left;

我的 HTML 如下所示：

<table class="beirat_l">
<tbody>
<tr>
    <td>
    <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  /></td>
</tr>
<tr>
    <td>Dr. Heiko Breit</td>
</tr>
</tbody>
</table>

<table class="beirat_r">
<tbody>
<tr>
    <td>
    <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  /></td>
</tr>
<tr>
    <td>Dr. Heiko Breit</td>
</tr>
</tbody>
</table>

但他们也没有工作。事实上，我在这个 CSS 中尝试的任何东西都不会影响我的两个表。

另外，另一个要求是表格需要响应，因此在小屏幕上查看时它们需要垂直移动。

【参考方案1】：

.flex-container 
  display: flex

<div class="flex-container">
  <table class="beirat_l">
    <tbody>
      <tr>
        <td>
          <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  /></td>
      </tr>
      <tr>
        <td>Dr. Heiko Breit</td>
      </tr>
    </tbody>
  </table>

  <table class="beirat_r">
    <tbody>
      <tr>
        <td>
          <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  /></td>
      </tr>
      <tr>
        <td>Dr. Heiko Breit</td>
      </tr>
    </tbody>
  </table>
</div>

将它们包装在一个弹性容器中，如果你想包装以避免重叠，那么你可以使用 flex-wrap:wrap

【讨论】：

嗯，非常感谢。但正如我的问题中所述，混合 div 和 table 被认为不是这样做的好方法......但你的建议正是......所以，我不确定我是否应该遵循这个......

另外：它不能解决我的问题。表格仍然垂直对齐显示。

【参考方案2】：

把你的桌子放在一个容器里，把那个容器放在一边。

<div class="container">
  <table class="beirat_l">
    <tbody>
      <tr>
        <td>
           <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  />
        </td>
      </tr>
      <tr>
        <td>Dr. Heiko Breit</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="container">
 <table class="beirat_r">
   <tbody>
     <tr>
       <td>
          <img  class="img-responsive"  src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style=""  />
       </td>
     </tr>
     <tr>
        <td>Dr. Heiko Breit</td>
     </tr>
   </tbody>
 </table>
</div>

之后将容器宽度设置为 50% 并向左浮动。

.container
  float: left;
  width: 50%;