Question

我想设计一个不使用 bootstrap 的表格，应该有 margin-right：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>

和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（max-width：1024px）{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>

表数据响应而不使用bootstrap

2 个答案: