把两张桌子放在一边

I want my table Semester Attended to be in the left of the Grade table. How can i achieve this? Im new to html and css. Can someone give me clues to achieve this?

我希望我的桌子学期出现在成绩表的左边。我怎样才能做到这一点？我是html和css的新手。有人能给我提供线索来实现这一目标吗？

here's my code.

这是我的代码。

         <div class="table-responsive">
         <table  class="table table-bordered">
            <thead>
            <tr>
              <th>Semester Attended</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            <aside></aside>
            </td>
            </tr>
            </tbody>
            </table>
         </div>


        <div class="table-responsive">
       <div id="gradetable">

       </div>
</div>

3 个解决方案

#1

Since you are using bootstrap - just use the grid system.
Create new row, add to columns (.col-X-6), and inside each column's-cell put one table.

由于您使用的是bootstrap - 只需使用网格系统即可。创建新行，添加到列（.col-X-6），并在每个列的单元格中放置一个表。

Something like that:

像这样的东西：

<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="table-responsive">
      <table  class="table table-bordered">
        <thead>
          <tr>
            <th>Semester Attended</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <aside></aside>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="table-responsive">
      <div id="gradetable">
      </div>
    </div>
  </div>
</div>

#2

You can wrap both tables for each column, same row in another table.

您可以为每列包装两个表，在另一个表中包含相同的行。

E.g.

例如。

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

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Semester Attended Table</th>
      <th>Grade Table</th>
    </tr>
  </thead>
  <tbody>
    <td>
      <table id="semesterAttendedTable" class="table table-bordered">
        <thead>
          <tr>
            <td>Semester 1</td>
            <td>Semester 2</td>
            <td>Semester 3</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1,1</td>
            <td>Row 1,2</td>
            <td>Row 1,3</td>
          </tr>
          <tr>
            <td>Row 2,1</td>
            <td>Row 2,2</td>
            <td>Row 2,3</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>

      <table id="gradeTable" class="table table-bordered">
        <thead>
          <tr>
            <td>Grade 1</td>
            <td>Grade 2</td>
            <td>Grade 3</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1,1</td>
            <td>Row 1,2</td>
            <td>Row 1,3</td>
          </tr>
          <tr>
            <td>Row 2,1</td>
            <td>Row 2,2</td>
            <td>Row 2,3</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
  </table

#3

You just need to add float:left to the div with the first table.

您只需要将float：left添加到第一个表的div中。

div.semester {
    float:left;  
}

<div class="table-responsive semester">
         <table  class="table table-bordered">
            <thead>
            <tr>
              <th>Semester Attended</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            <aside></aside>
            </td>
            </tr>
            </tbody>
        </table>
</div>
<div class="table-responsive" id="gradetable">
      <table class="table table-bordered">
            <thead>
            <tr>
              <th>Grades</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            <aside></aside>
            </td>
            </tr>
            </tbody>
     </table>
</div>

#1