InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
What is a Condensed Table in Bootstrap? |
|
Answer» To condense a table means to cut the row padding in half to shrink it. Here’s how you make a table condensed: <table CLASS="table table-condensed"> … </table>A regular table with border looks like this: However, a table with bordered and condensed class looks like this. You can easily spot the difference in padding i.e. the following table itself looks condensed: The below example displays how we can create a condensed table: <!DOCTYPE HTML> <html lang="en"> <head> <TITLE>BOOTSTRAP Condensed Table</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Rank</h2> <p>Rank of teams in Test Cricket</p> <table class="table table-bordered table-condensed"> <thead> <tr> <th>Team</th> <th>Rank</th> </tr> </thead> <tbody> <tr> <td>India</td> <td>1</td> </tr> <tr> <td>England</td> <td>2</td> </tr> <tr> <td>Australia</td> <td>3</td> </tr> <tr> <td>SOUTH Africa</td> <td>4</td> </tr> <tr> <td>Srilanka</td> <td>5</td> </tr> </tbody> </table> </div> </body> </html>The condensed table as our output looks like this: |
|