Question

我希望我的table 学期参加位于成绩 table的左侧。我怎样才能实现这一目标？我是html和css的新手。有人能给我提供线索来实现这个目标吗？

这是我的代码。

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

Answer 1

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

<强> E.g。

＆＃13;

<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

＆＃13;

Answer 2

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

类似的东西：

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

Answer 3

你只需要将float：left添加到带有第一个表格的div。

＆＃13;

div.semester {
    float:left;  
}

＆＃13;

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

＆＃13;

把两张桌子放在一边

3 个答案: