How to set Height of a table in a Bootstrap as the value of Width using CSS?


Tags: html,css,css3,bootstrap-modal

Problem :

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>



Solution :

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%).


    CSS Howto..

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How to make a transition effect that just perform like css transition?

    Android WebView : how do I control webView height?

    How can I edit adjacent selector to a nested one

    How to customize HTML/CSS tooltips?

    How to reach 'this' element in the .css part in Jquery

    How to use CSS Rotate() in TH Table Tags

    How to make pull right display properly?

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    ng-show/ng-hide breaking CSS animations

    How to create two CSS transitions in parallel on nested elements

    How to fix the css red notification bubble

    How to move the second child in my nav menu with CSS

    How do I make footer take 100% of the width of the webpage?

    CSS show elements below each other

    Bootstrap 3: How to make margins responsive?

    How to set font style light?

    how to make a div toggle background-position “onclick” while keeping hover

    How can I set the main theme-font dynamically, in WordPress

    How to make a css compatible by all browser

    How to add text or characters using CSS (no javascript)?

    How can I select every other element that does not have a specific class?

    How do I have fieldset::before rule account for the legend?

    How to make a graphic image responsive in css

    Show popout bubble above when no space available below

    How to center this on screen

    How to REALLY control font size in an eBay listing [closed]

    CSS how to make a fixed height?

    How can I show an attribute as text with CSS?

    How to stop a CSS rule from applying to a specific element [duplicate]