сделать два стола рядом друг с другом

Question

Я хочу, чтобы мой tableСеместр Присутствовали находиться в левой части Gradetable. Как я могу достичь этого? Im новое для 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

Поскольку вы используете загрузчик - просто используйте подвесную систему.
Создайте новую строку, добавьте в столбцы (.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 2

Вам просто нужно добавить float: слева в 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>

Answer 3

Вы можете обернуть обе таблицы для каждого столбца, той же строке в другой таблице.

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