Twitter Bootstrap Question posted in

Manipulating table cell size and width on different viewports using twitter bootstrap

I want to basically have a table in my design where the size varies from 3 X 3 to 7 X 7 and need the full table to fit the small screens too.

So now going deeper, when the screen size is that of a mobile device I want the table to stretch full width, while on larger screens I need them to be in the center of the screen. Along with that in any screen size, the cells dimensions should be width = height, in other words a square.

How can I do this with CSS and TWITTER-BOOTSTRAP only?

P.S: I am new to bootstrap.

HTML

<div class="site-wrapper">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
            </div>
        </div>
    </nav>
<div class="container">
        <table class="table table-bordered">
            <tr>
                <td data-cell="0"></td>
                <td data-cell="1"></td>
                <td data-cell="2"></td>
            </tr>
            <tr>
                <td data-cell="3"></td>
                <td data-cell="4"></td>
                <td data-cell="5"></td>
            </tr>
            <tr>
                <td data-cell="6"></td>
                <td data-cell="7"></td>
                <td data-cell="8"></td>
            </tr>
        </table>
    </div>
</div>

CSS

body {
    background-color: #fff;
    color: #ffffff;
    text-align: center;
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #333;
    /*overflow: hidden;*/
}
a {
    color: #ffffff;
}
a:hover, a:active {
    color: #ffffff;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    border-top: 5px solid #5A332B;
    background-color: #ccbb99 !important;
}
Tags:

2

Answers


  1. 0

    Update: Just couldn’t do the pure css version and powered with jQuery:

    function setHeight() {
  var myTable = $("#myTable");
  myTable.height(myTable.width());
     $( window ).resize(function() {
         myTable.height(myTable.width());
     });
}

setHeight();
    body {
    background-color: #fff;
    color: #ffffff;
    text-align: center;
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #333;
    /*overflow: hidden;*/
}
a {
    color: #ffffff;
}
a:hover, a:active {
    color: #ffffff;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    border-top: 5px solid #5A332B;
    background-color: #ccbb99 !important;
}

.container {
    
  }
.table {
  width: 50vw;
    height: 50vw;
  margin-left: 25%;
  margin-top: 5%;
} 

.table-bordered {
  border: 1px solid black;
}

@media screen and (max-width: 750px) {
    .table {
      margin-left: 0;
      margin-top: 0;
      width: 100%;
      height: 100%;
    }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
            </div>
        </div>
    </nav>
<div class="container">
        <table id="myTable" class="table table-bordered">
            <tr>
                <td data-cell="0">0</td>
                <td data-cell="1">1</td>
                <td data-cell="2">2</td>
            </tr>
            <tr>
                <td data-cell="3">3</td>
                <td data-cell="4">4</td>
                <td data-cell="5">5</td>
            </tr>
            <tr>
                <td data-cell="6">6</td>
                <td data-cell="7">7</td>
                <td data-cell="8">8</td>
            </tr>
        </table>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    If I understand your issue then you should change table structure to div. Because you need square box for every device screen size. Also you need to write little bit of JavaScript or jQuery.

    $(function(){
  var newBoxHeight= $('#square-box .col-xs-4').outerWidth();
  $('#square-box .col-xs-4').outerHeight(newBoxHeight);
});
    .col-xs-4{
  border: 2px solid #000000;
}
.col-xs-4:nth-child(2n+1){
  background-color: #020202;
}
.col-xs-4:nth-child(2n+2){
  background-color: #121212;
}
.center-content{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.table-box,
.tbale-cell-box{
  color: #ffffff;
  font-size: 60px;
  height: 100%;
  width: 100%
}
.table-box{
  display: table;
  text-align: center;
}
.tbale-cell-box{
  display: table-cell; 
  vertical-align: middle;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" id="square-box">
    <div class="col-xs-4 col-sm-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">1</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">2</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">3</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">4</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">5</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">6</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">7</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">8</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">9</span></span></div></div>
  </div>
</div>

    Hope it will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search