Holla Tech - Learn
Bootstrap 3: Tables
 

The table class adds the basic Bootstrap styling (horizontal dividers) to a table.

Additional styling can be added with these classes:
table-bordered Adds borders on all sides to the table.
table-condensed Condenses the table by reducing cell padding.
table-striped Adds zebra stripes (alternating row shading) to the table.
table-hover Adds a hover effect (gray background) to the rows of the table.

To create a responsive table, use the class table-responsive for the <div> element enclosing the table. Such a table scrolls horizontally on devices with screens less than 768px wide.

The following code displays a striped, responsive table: 

<div class=“container table-responsive>
  <table class=table table-striped>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>
</div>

 

TASK:
Test the codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT