How to set Height of a table in a Bootstrap as the value of Width using CSS?
I'm having a Table, designed using Bootstrap CSS. I need to set the height as same as the value of width of the Table. In Bootstrap, the width can be changed according to the device. Kindly assist
+---------+ | CSS | | Table | | 1:1 | +---------+
My HTML Source Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bootstrap Table</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> <table class="col-lg-12 col-sm-12 col-md-12 col-xs-12" style="height:calc(width);" border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> </html>
The essential issue here, as mentioned in the comments, is getting the individual cells to remain square. Doing this in css is rather trivial, as demonstrated by a number of answers in this question. The real problem is dealing with content that may not be uniformly sized.
This is one way of doing it, although admittedly it's a bit hacky: Add a
div to at least one cell in each row, that has
padding-bottom: 100%, and
position:relative. Then add another
position:absolute to each cell. This last
div will be where you put your content. Then I had to remove the cell padding added by bootstrap (alternatively you could just set cell width to 25% and skip the bootstrap class, which is probably not giving you any advantage in the table itself). You'll have to play with
overflow attribs on the divs to control how the content gets displayed under various circumstances.
I also wrote you a fiddle that looks like it solves your issue.
Note: this model makes the assumption that there will always be 4 and only 4 rows in the table (hence the