Две таблицы в настоящее время вертикально сверху и снизу, предпочли бы, чтобы они были из стороны в сторону - PullRequest
Новая
       10

Две таблицы в настоящее время вертикально сверху и снизу, предпочли бы, чтобы они были из стороны в сторону

1 голос
/ 17 апреля 2020

Я новичок в html и css, я разрабатываю простое веб-приложение на flask.

Я пытаюсь отредактировать домашнюю страницу home. html, которая наследует от макета. html.

Я бы хотел, чтобы нижний стол (с зелеными и красными кружками) находился справа от основного стола над ним. В идеале я мог бы определить количество места, которое каждый занимает в контейнере, т.е. левая таблица занимает 65%, а правая 35%. Таблицы будут увеличивать по вертикали всю длину страницы.

Спасибо

enter image description here

макет. html

...
table {border-collapse: collapse; width: 100%; border: none;}
    /*table {border-collapse: collapse; width: 100%; margin-bottom: 2em; border: none;}*/
    td { border: none; padding: 0.5em 0; font-size: 20px; vertical-align: top;}
    thead { text-transform: uppercase; font-weight: 700; border-bottom: 1px solid #ea560d;}
    thead td { font-size: 20px; letter-spacing: 0.3px;}
    tbody tr { border-bottom: 1px solid #a8a8a8;}

    .leftside .rightside{
        height:100vh;
        width:95%;
    }
    .leftside{
        background:white;
        overflow:hidden;
    }
    .rightside{
        background:black;
        width:220px;
        margin-left:30px;
        float:right;
    }
    </style>
<body>
  <section class="container">
          {% block content %}{% endblock %}
  </section>
</body>
</html>

дома. html

{% block content %}
    <div style="leftside">
        <p align="right">
        <a class="btn btn-primary" class="nav-item nav-link"  href="{{ url_for('new_post') }}" role="button"
        >New Post</a>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
        aria-expanded="false" aria-controls="collapseExample">Quick Expand</a>
        </p>
        <table style="leftside" align="center">
              <tr style="border-bottom:1pt solid black;">
                <th>Title</th>
                <th>Status</th>
                <th>Datetime</th>
                <th>Assigned To</th>
                <th>Reported By</th>
                <th>Edit</th>
              </tr>
             {% for post in posts %}
               <tr>
                    <td><a class="article-title" href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></td>
                    <td>{{ post.status }}</td>
                    <td><strong><small>{{ post.date_posted }}</small></strong></td>
                    <td><small>{{ post.assigned_to }}</small></td>
                    <td><small>{{ post.reported_by }}</small></td>
                    <td><a class="btn btn-primary" class="article-title" href="{{ url_for('update_post', post_id=post.id) }}">Edit</a></td>
               </tr>
                    <td colspan="5">
                    <div class="collapse" id="collapseExample"><div class="card card-body">{{ post.description }}</div></div>
                    </td>
              {% endfor %}
        </table>
    </div>
    <div style="rightside">
        <table>
            {% for buggy in buggies %}
                <tr>
                    {% if buggy['BRider'] %}
                        <td><svg height="40" width="40">
                        <circle cx="14" cy="14" r="12" stroke="black" stroke-width="3" fill="red" />
                        Sorry, your browser does not support inline SVG.
                        </svg></td>
                    {% else %}
                        <td><svg height="40" width="40">
                        <circle cx="14" cy="14" r="12" stroke="black" stroke-width="3" fill="green" />
                        Sorry, your browser does not support inline SVG.
                        </svg></td>
                    {% endif %}
                    <td>{{ buggy['BName'] }}</td>
                    <td>{{ buggy['BRider'] }}</td>
               </tr>
              {% endfor %}
        </table>
    </div>
{% endblock content %}

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Вышеупомянутый код не функционирует в полной мере, чтобы воссоздать его, однако этот фрагмент поможет вам, как вы можете достичь запрошенной работы:

flex получил одну из этих функций что помогает разработчику не ломать голову, чтобы выполнить это выравнивание, поскольку свойство flex позаботится как о rows, так и о columns.

В приведенном ниже фрагменте вы можете изменить родительское свойство flex-direction:row/column; чтобы увидеть разницу в выравнивании. 

.Blocks{
  display:flex;
  flex-direction:row; /* change here(row/column) to see the difference */
  padding:5px;
  border:2px solid yellow;
  width:650px;
}
#First{
  border:2px solid blue;
  height:450px;
  width:300px;
  margin:5px;
}
#Second{
  border:2px solid red;
  height:450px;
  width:300px;
  margin:5px;
}
<div class="Blocks">
<div id="First">
First
</div>
<div id="Second">
Second
</div>
</div>
0 голосов
/ 17 апреля 2020

Попробуйте использовать атрибут float : left. 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;

  }
table{
 width : 50%;
 float : left;
}
</style>
</head>
<body>

<h1>The table element</h1>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
<table >
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Вот рабочий пример Нажмите здесь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...