Как выровнять (несколько) таблиц по центру (и реагировать)? - PullRequest
Новая
       58

Как выровнять (несколько) таблиц по центру (и реагировать)?

0 голосов
/ 16 февраля 2019

Я пытаюсь выровнять две (и позже, может быть, больше) таблицы по горизонтали.Я также пытаюсь сделать это как часть шаблона, который я использую от CMS.

Вышеупомянутые решения в:

HTML, как выровнять две таблицы в одной строке? HTML - две таблицы рядом

у меня не сработало.

Ну, во-первых, "смесь" 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 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, не влияет намои две таблицы.

Кроме того, еще одно требование - таблицы должны быть отзывчивыми, поэтому они должны смещаться по вертикали при просмотре на маленькихл экраны.

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019 

.flex-container {
  display: flex
}
<div class="flex-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>

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

Оберните их в гибкий контейнер, и если вы хотите обернуть, чтобы избежать наложения, вы можете использовать {flex-wrap: wrap}

0 голосов
/ 16 февраля 2019

Поместите свой стол в контейнер и выровняйте эту сторону контейнера по сторонам. 

<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%;
}
...