Question

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

上述解决方案位于：

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

对我不起作用。

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

此外，使用时

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 alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" /></td>
</tr>
<tr>
    <td>Dr. Heiko Breit</td>
</tr>
</tbody>
</table>

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

但是它们也不起作用。实际上，我在此CSS中尝试的任何操作都不会影响我的两个表。

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

Answer 1

将表格放入容器中，并将该容器的一面对齐。

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

之后，将容器宽度设置为50％，然后向左浮动。

.container{
  float: left;
  width: 50%;
}

Answer 2

const res = [{sakti: "23", foo: "33"},{Baim: "20"},{Jaka: "18"}];

let mapped = res.reduce(
    (acc, o) => acc.concat(Object.entries(o).map(([k, v]) => ({name: k, y: +v}))),
    []
);

console.log(mapped);

.flex-container {
  display: flex
}

将它们包装在flex容器中，如果要包装以避免重叠，则可以使用{flex-wrap：wrap}

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

2 个答案: