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

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    CSS\HTML - How to add Ionicons to CSS “content” property?

    How to make a jQuery step animation?

    How to make the divs fill the remaining space without using float?

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    in Emacs, how to turn off abbrevs in css-mode?

    How to draw a lens like circle on mouseover

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How can I solve this :before or :after issue in IE7?

    css responsive design: how to improve my page ?

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    How to create profession box shadow effect in div using css

    How can I change this HAML format to normal CSS style?

    How to style Repeater item background color ontap?

    How to get rid of spaces with CSS

    does anyone know how to do this css transition? [closed]

    How to give cross browser transparency to element's background only?

    How do I append jumping dots to a text in html and css

    How can I fix left menu in bootstrap 3.0? [closed]

    How to style a table from horizontal layout to vertical layout with CSS

    How do I correct this error?

    HTML/CSS: How to resize checkboxes (without overlapping)

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to run PHP through Adobe Muse generated CSS

    How to specify styles for h:panelgrid in jsf

    How to measure the amount of time an animation took place using JavaScript

    CSS how do I define the height between multiple label and textboxes elements

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to expand an abbreviated word onhover in html via css or javascript or even using jquery?

    How to fill parent element background color with CSS?