当一张表的宽度很大时，引导表不在列中

Question

我有两个要并排显示的表格。当第一个表格的宽度很大（但仍然小到可以并排放置）时，第二个表格显示在其下方。

有没有办法并排显示它们，并且只有在屏幕宽度太小时才下拉？

这是我的代码：

<div class="container">
<div class="row">
    <div class="col-sm">
    <h3>Students</h3>
    <div class="row">
        <a href="/newstudent" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
        </tr>


        <tr>
            <td><a href="/editstudent/lilyliam">lilyliam</a></td>
            <td>Lily</td>
            <td>Liam</td>
        </tr>

        <tr>
            <td><a href="/editstudent/gracenoah">gracenoah</a></td>
            <td>Grace</td>
            <td>Noah</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>William</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>Williamsssssssssssssssssss</td>
        </tr>

    </table>
    </div>
    <div class="col-sm">
    <h3>Teachers</h3>
    <div class="row">
        <a href="/newteacher" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
            <td>Type</td>
        </tr>

        <tr>
            <td><a href="/editteacher/johnsmith">johnsmith</a></td>
            <td>John</td>
            <td>Smith</td>
            <td>ADMIN</td>
        </tr>

        <tr>
            <td><a href="/editteacher/williamjoseph">williamjoseph</a></td>
            <td>William</td>
            <td>Joseph</td>
            <td>teacher</td>
        </tr>

        <tr>
            <td><a href="/editteacher/franksmith">franksmith</a></td>
            <td>Frank</td>
            <td>Smith</td>
            <td>teacher</td>
        </tr>

    </table>
    </div>
</div>
</div>

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
}

th {
    text-align: left;
}

所有其他 css 来自 bootstrap 谢谢

Answer 1

我假设您使用的css是 Bootstrap 提供的官方包。要并排对齐表格，您可以执行以下操作：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>Table 1</h1>
      // Table 1 Here
    </div>
    <div class="col-md-6">
      <h1>Table 2</h1>
      // Table 2 Here
    </div>
  </div>
</div>

希望这对你有用。