表データ応答ブートストラップ

Question

my html page

私はマージン右持っている必要があり、そのようにブートストラップを使用せずにテーブルを設計したいと思います：0を、我々は、ウィンドウを最小化したとき、私はテーブルにしたいですこのように表示する。

<div id = "background"></div> 
<div class = "header"> 
    <div class = "headerItems"> 
     <div class = "items"> 
      <div class = "items-navigation-back"><i class = "ion ion-arrow-left-c"></i></div> 
      <div class = "one"><i class = "ion ion-ios-pulse-strong"></i></div> 
      <div class = "two"><i class = "ion ion-speedometer"></i></div> 
      <div class = "title"><span class = "title">{{['Device','Doctor','Settings'][0]}}</span></div> 
      <div class = "search"> 
       <input type = "search" ng-model = "searchText" placeholder = "search-items"></input> 
      </div> 
     </div> 
    </div> 
</div> 
<div class = "body-content"> 
    <div class = "bodyItems"> 
     <div class = "rooms-one"> 
      <div class = "rooms-one-partone"> 
       <div class = "rooms-one-partone-icon"><img src = "icons/data/48.png"></img></div> 
       <div class = "rooms-one-partone-title"><p>data</p></div> 
       <div class = "rooms-one-partone-text"><p>button</p></div> 
       <div class = "rooms-one-partone-switch"></div> 
      </div> 
     </div> 
    </div> 
</div> 

during minimising the windowとCSS：

html,body{ 
    margin: 0; 
    padding: 0; 
} 
#background{ 
    right: 0; 
    background-image: url(../images/bg.jpg); 
    width: 768px; 
    height: 100%; 
    position: fixed; 
} 
.header{ 
    padding: 3px; 
    position: fixed; 
    border: 1px solid silver; 
    max-width: 768px; 
    right: 0; 
    overflow: hidden; 
} 
.headerItems{ 
    margin-left: 0; 
    margin-right: 0; 
} 
.items{ 
    background: white; 
    table-layout: fixed; 
    width: 100%; 
    display: table; 
    border-spacing: 10px 0; 
} 
.navigation-back{ 
    width: 20px; 
    color: black; 
    font-size: 35px; 
    vertical-align: top; 
    display: table-cell; 
} 
.icon-one{ 
    width: 100px; 
    color: white; 
    background: yellow; 
    font-size: 35px; 
    display: table-cell; 
    border-radius: 10px; 
} 
.icon-two{ 
    background: green; 
    width: 100px; 
    color: white; 
    font-size: 35px; 
    display: table-cell; 
    border-radius: 10px; 
} 
.title{ 
    text-align: center; 
    font-size: 120%; 
    display: table-cell; 
    vertical-align: middle; 
} 
.search{ 
    text-align: right; 
    vertical-align: middle; 
    display: table-cell; 
} 

Answer 1

使用本：

テーブル{幅：50％;}

@media（最大幅：1024px ）{表{幅：100％;}}

Answer 2

以下のコードを使用すると完全に反応するテーブルを作成できます

 <style> 
/* First some padding and borders. */ 
    table { 
     border-collapse: collapse; 
     border-spacing: 0; 
     border: 1px solid #bbb; 
    } 
    td,th { 
     border-top: 1px solid #ddd; 
     padding: 4px 8px; 
    } 
/* Then some striped rows (nth-child is not supported by IE8).. */ 
    tbody tr:nth-child(even) td { background-color: #eee; } 


    @media screen and (max-width: 640px) { 
     table { 
      overflow-x: auto; 
      display: block; 
     } 
    } 
    </style> 
    <table> 
     <tr> 
     <td>Header 1</td> 
     <td>Header 2</td> 
     <td>Header 3</td> 
     <td>Header 4</td> 
     </tr> 
     <tr> 
     <td>val 1</td> 
     <td>val 2</td> 
     <td>val 3</td> 
     <td>val 4</td> 
     </tr> 

    </table>