两张桌子目前上下垂直，希望它们并排答案

【问题标题】：Two tables currently vertically top and bottom, would prefer them to be side to side两张桌子目前上下垂直，希望它们并排
【发布时间】：2020-04-17 22:23:45
【问题描述】：

我对 html 和 css 很陌生，我正在烧瓶中开发一个简单的网络应用程序。

我正在尝试编辑从 layout.html 继承的主页 home.html。

我希望底部表格（带有绿色和红色圆圈）位于其上方主表格的右侧。理想情况下，我可以定义每个在容器中占用的空间量，即左表占 65%，右表占 35%。表格将垂直延伸页面的长度。

谢谢

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

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

【问题讨论】：

我建议查看 flexbox：css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css jinja2

【解决方案1】：

以上代码无法完全重新创建它，但是此 sn-p 将帮助您了解如何实现所要求的工作：

flex 获得了这些功能之一，可帮助开发人员不费力地进行这些对齐，因为 flex 的属性将同时处理 rows 和 columns。

在下面的 sn-p 中，您可以更改 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>

【讨论】：

【解决方案2】：

尝试使用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>

这是工作示例Click Here!

【讨论】：