Выровняйте стол по горизонтали - PullRequest
Новая
       1

Выровняйте стол по горизонтали

0 голосов
/ 15 июня 2019

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

Обновление: У меня есть 7 таблиц, у них есть 3 столбца, но количество строк отличается друг от друга. Я использую тему начальной загрузки v4. Всякий раз, когда я делаю class="table", все идет не так.

enter image description here

<div class="table">

<table class="table-striped" style="display: inline-block; float: left; ">
  <thead>
    <tr>
      <th style="width:200px;"> Module </th>
      <th style="width:120px;"> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>


<tr>
<td> ACU  </td>                 
<td> Fls </td>             
<td> 0</td> </tr>
<tr>
<td>  Mode</td>                    
<td> Trk</td>              
<td> 3</td> 
</tr>
<tr>
<td>  Use</td>                 
<td> PS</td>          
<td> 43</td> 
</tr>

  </tbody>
</table>




<table class="table-striped" style="display: inline-block; margin-left:150px;">
  <thead>
    <tr>
      <th style="width:200px;">  Module </th>
      <th style="width:120px;"> Info </th>>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tag2>
        <tr>
        <td> PBit</td>          
         <td> Lock</td>    
         <td> 1</td> 
         </tr>
        <tr><td> Bit</td>         
          <td> NA</td>       
          <td> 0</td> 
          </tr>
        <tr>
        <td> it</td>          
         <td> Lock</td>    
         <td> 1</td>
         </tr>
        <tr>
        <td> Bit</td>         
          <td> NA</td>      
          <td> 0</td> 
          </tr>
        <tr>
        <td> Bit</td>         
        <td> Lock</td>    
         <td> 1</td>
         </tr>
        <tr>
        <td> Bit</td>         
        <td> NA</td>       
        <td> 0</td> 
        </tr>

  </tbody>
</table>

Ответы [ 3 ]

1 голос
/ 15 июня 2019

Просто измените таблицу position на inline-block.Это позволит вашим элементам таблицы располагаться на одной линии по горизонтали друг с другом.Вы должны сделать это в файле CSS или в head документа, а не в строке, если это возможно.Также, для справки, display:float не является действительным css.Вот вам скрипка . 

table{
  border:1px solid black;
  display:inline-block; 
  margin:20px;
}
<table>
  <thead>
    <tr>
      <th> Module </th>
      <th> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Mode</td>                    
      <td> Track</td>             
      <td> 3</td> 
    </tr>
    <tr>
      <td> A</td>               
      <td> PS</td>          
      <td> 43</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th> Module </th>
      <th> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Mode</td>                    
      <td> Track</td>             
      <td> 3</td> 
    </tr>
    <tr>
      <td> A</td>               
      <td> PS</td>          
      <td> 43</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 15 июня 2019

Попробуйте это: - 

<!DOCTYPE html>
<html lang="en">
    <style>
        .tbl{
            border : 1px solid black;
            float: left;
            margin:  0 5px;
        }
        .row{
            margin: 5px;
        }
        .clear{
            clear: both;
        }

    </style>

    <body>
        <div class="row">
            <table class="tbl2 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl2 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>


            <table class="tbl3 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
        <div class="row">
            <table class="tbl4 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl5 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl6 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
        <div class="row">
            <table class="tbl7 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
    </body>
</body>
</html>

вывод:

enter image description here

0 голосов
/ 15 июня 2019

Я добавил дополнительные merge_table div, которые обертывают в него две таблицы, так что после того, как я смогу использовать flexbox, чтобы получить таблицу рядом.

Я использовал d-flex класс, обозначает display: flex и для различения двух таблиц я добавил ml-3 обозначает margin-left. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="merge_table d-flex">
    <table class="border">
        <thead>
            <tr>
                <th> Module </th>
                <th> Info </th>
                <th> Value </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Mode</td>                    
                <td> Track</td>             
                <td> 3</td> 
            </tr>
            <tr>
                <td> A</td>               
                <td> PS</td>          
                <td> 43</td>
            </tr>
        </tbody>
    </table>

    <table class="border ml-3">
        <thead>
            <tr>
                <th> Module </th>
                <th> Info </th>
                <th> Value </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Mode</td>                    
                <td> Track</td>             
                <td> 3</td> 
            </tr>
            <tr>
                <td> A</td>               
                <td> PS</td>          
                <td> 43</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...