CODEWITHSUNDEEP
css
nethken
nethken

Reputation: 1092

Make two table beside each other

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?

enter image description here

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>

Upvotes: 0

Views: 132

Answers (3)

Dekel
Dekel

Reputation: 62556

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.

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>

Upvotes: 1

react_or_angluar
react_or_angluar

Reputation: 1574

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

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>

Upvotes: 0

choz
choz

Reputation: 17858

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

Upvotes: 1

Related Questions