-1

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

Note: Kindly give solution using CSS. Don't use the Javascript or any other raw value feeding.

+---------+
|   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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
B.Balamanigandan
  • 4,713
  • 11
  • 68
  • 130

1 Answers1

-1

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 div with 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 padding-bottom: 25%).

Community
  • 1
  • 1
ygesher
  • 1,133
  • 12
  • 26
  • You should also make sure you understand how the bootstrap column classes work - you were setting the same classes on the table and it's `div` wrapper, which doesn't really make sense. – ygesher Dec 27 '15 at 07:44
  • Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Dec 27 '15 at 07:58
  • I think the explanations I added flesh it out a bit, and the -1 is undeserved. – ygesher Dec 27 '15 at 08:01
  • While the explanations might flesh it out, they don't counter the basic problem which is that people have to visit a third party site to understand the answer. The bones of the answer need to be in the answer, not just the flesh. – Quentin Dec 27 '15 at 08:04
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/10694038) – Fabio Dec 27 '15 at 08:04
  • Thanks @jegesh. your fiddle link gives me the solution for my requirement. Thanks alot. – B.Balamanigandan Dec 27 '15 at 08:11
  • @FabioLuz I changed the answer to be more "up to code". Pun intended. – ygesher Dec 27 '15 at 08:14
  • @B.Balamanigandan Please mark the answer as correct, kind friend. – ygesher Dec 27 '15 at 08:15
  • @jegesh - The Table is not scaled as the aspect ration 1:1 – B.Balamanigandan Dec 27 '15 at 08:23
  • @good work... I marked your answer as answer for the post. If I put any text to the cell. Then immediately it collapsed the aspect ration. – B.Balamanigandan Dec 28 '15 at 12:12
  • I changed things so the content won't break it, but you may to fiddle further with the overflow attributes. – ygesher Dec 28 '15 at 14:11
  • @jegesh - Kindly check the text alignment. The Text are placed below the Cell. – B.Balamanigandan Dec 29 '15 at 02:33