Question

我想在我的设计中基本上有一个表格，其大小从 3 X 3 到 7 X 7 ，并且需要全表以适应小屏幕。

现在更深入，当屏幕尺寸是移动设备时，我希望表拉伸全宽，而放大屏幕 strong>我需要他们在屏幕中心。与任何屏幕尺寸一样，单元格尺寸应为 width = height ，换句话说是正方形。

我如何才能使用CSS和TWITTER-BOOTSTRAP？

P.S：我是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;
}

Answer 1

更新：无法使用纯css版本并使用jQuery驱动：

＆＃13;

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

＆＃13;

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%;
    }
}

＆＃13;

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

＆＃13;

Answer 2

如果我了解您的问题，那么您应该将table结构更改为div。因为每个设备屏幕尺寸都需要方框。您还需要写一点JavaScript或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>

希望它会有所帮助。

使用twitter bootstrap在不同视口上操作表格单元格大小和宽度

2 个答案: