表数据引导

Question

my html page

我想设计一个表，而以这种方式应该有保证金权使用引导：0，当我们最小化的窗口，我希望表以这种方式显示。

during minimising the window

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

而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（最大宽度：1,024像素x ）{table {width：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>