2017-02-10 11 views
0

全幅テーブルが欲しいです。私が与えるときposition:fixed;それは全幅になりますが、スクロール可能ではありません。要するに、私はブラウザの本体に余裕のないテーブルが必要です。 私を助けて、これをやる方法を教えてください。HTML全幅テーブル

<div class="table"> 

    <div class="row"> 
     <div class="cell"> 
      Tips and Fair Review 
     </div> 
    </div> 


</div> 

body { 
    font-family: "Helvetica Neue", Helvetica, Arial; 
    font-size: 14px; 
    line-height: 20px; 
    font-weight: 400; 
    color: #3b3b3b; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    zoom: 4.0; 

} 
.row { 
    display: table-row; 
    background: #f6f6f6; 
} 
.row:nth-of-type(odd) { 
    background: #e9e9e9; 
} 

.wrapper { 
    margin: 0 auto; 
    padding: 40px; 
    max-width: 800px; 
} 

.table { 
    margin: 0 0 40px 0; 
    width: 100%; 
    display: table; 
    padding:0; 
    margin:0; 
    top:0; 
    left:0; 
    overflow:scroll; 
} 
@media screen and (max-width: 580px) { 
    .table { 
     display: block; 
    } 
} 
.row { 
    display: table-row; 
    background: #f6f6f6; 
} 
.row:nth-of-type(odd) { 
    background: #e9e9e9; 
} 
.row.header { 
    font-weight: 900; 
    color: #ffffff; 
    background: #ea6153; 
} 
.row.green { 
    background: #27ae60; 
} 
.row.blue { 
    background: #2980b9; 
} 
@media screen and (max-width: 580px) { 
    .row { 
     padding: 8px 0; 
     display: block; 
    } 
} 
.cell { 
    padding: 6px 12px; 
    display: table-cell; 
} 
@media screen and (max-width: 580px) { 
    .cell { 
     padding: 2px 12px; 
     display: block; 
    } 
} 
.cell:before {  
    padding-left:10px; 
    font-family: 'FontAwesome'; 
    margin:0 5px 0 -15px; 
    content: '\f023'; 
} 

答えて

0

あなたのボディスタイルにmargin: 0を追加します。

body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial; 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
    font-weight: 400; 
 
    color: #3b3b3b; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-smoothing: antialiased; 
 
    zoom: 4.0; 
 
    margin: 0; 
 
} 
 
.row { 
 
    display: table-row; 
 
    background: #f6f6f6; 
 
} 
 
.row:nth-of-type(odd) { 
 
    background: #e9e9e9; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    padding: 40px; 
 
    max-width: 800px; 
 
} 
 
.table { 
 
    margin: 0 0 40px 0; 
 
    width: 100%; 
 
    display: table; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: scroll; 
 
} 
 
@media screen and (max-width: 580px) { 
 
    .table { 
 
    display: block; 
 
    } 
 
} 
 
.row { 
 
    display: table-row; 
 
    background: #f6f6f6; 
 
} 
 
.row:nth-of-type(odd) { 
 
    background: #e9e9e9; 
 
} 
 
.row.header { 
 
    font-weight: 900; 
 
    color: #ffffff; 
 
    background: #ea6153; 
 
} 
 
.row.green { 
 
    background: #27ae60; 
 
} 
 
.row.blue { 
 
    background: #2980b9; 
 
} 
 
@media screen and (max-width: 580px) { 
 
    .row { 
 
    padding: 8px 0; 
 
    display: block; 
 
    } 
 
} 
 
.cell { 
 
    padding: 6px 12px; 
 
    display: table-cell; 
 
} 
 
@media screen and (max-width: 580px) { 
 
    .cell { 
 
    padding: 2px 12px; 
 
    display: block; 
 
    } 
 
} 
 
.cell:before { 
 
    padding-left: 10px; 
 
    font-family: 'FontAwesome'; 
 
    margin: 0 5px 0 -15px; 
 
    content: '\f023'; 
 
}
<div class="table"> 
 

 
    <div class="row"> 
 
    <div class="cell"> 
 
     Tips and Fair Review 
 
    </div> 
 
    </div> 
 

 

 
</div>

関連する問題