響應表在媒體查詢中添加邊距？

我創建了一個半響應表，通過媒體查詢（這是一個在手機中分解成單個日曆的日曆）從5列分解爲2列。它幾乎完全按照我想要的方式工作，但表格稍微偏離中心（看起來像右邊大約10px），當我期待它被居中時，因爲表格在具有margin：div的div中，在寬度爲100％的容器div內。響應表在媒體查詢中添加邊距？

下面是HTML：

<div id = "tbl-cont"> 
<div id = "tbl"> 
<table> 
    <th colspan="5"><b>Week 1</b></th> 
    <tr class = "days"> 
     <td><i>Day 1</i></td> 
     <td><i>Day 2</i></td> 
     <td><i>Day 3</i></td> 
     <td><i>Day 4</i></td> 
     <td><i>Day 5</i></td> 
    </tr> 
    <tr class = "wk1"> 
    <td>Snatch 5x3 75%<br>Snatch pull 4x3 75%<br>Front squat 5x3 75%</td> 
    <td>Pull ups 4x7<br>Bench 1x5 65%, 1x5 75%, 1x5* 85%<br>Dips 4x10<br>Barbell row 4x10</td> 
    <td>Jerk 5x3 75%<br>OHP 1x5 65%, 1x5 75%, 1x5* 85%<br>Overhead squat 4x3</td> 
    <td>Pull ups ladder<br>Dips ladder<br>Curls<br>Abs</td> 
    <td>Clean & Jerk 5x3 75%<br>Clean pull 4x3 85%<br>Back squat 1x5 65%, 1x5 75%, 1x5* 85%</td> 
    </tr> 
    <th colspan="5"><b>Week 2</b></th> 
    <tr class = "days"> 
     <td><i>Day 1</i></td> 
     <td><i>Day 2</i></td> 
     <td><i>Day 3</i></td> 
     <td><i>Day 4</i></td> 
     <td><i>Day 5</i></td> 
    </tr> 
    <tr class = "wk2"> 
    <td>Snatch 5x2 80%<br>Snatch pull 4x2 80%<br>Front squat 5x2 85%</td> 
    <td>Pull ups 4x5<br>Bench 1x5 65%, 1x5 75%, 1x5* 85%<br>Dips 4x8<br>Barbell row 4x10</td> 
    <td>Jerk 5x2 85%<br>OHP 1x5 70%, 1x5 80%, 1x5* 90%<br>Overhead squat 4x2</td> 
    <td>Pull ups ladder<br>Dips ladder<br>Curls<br>Abs</td> 
    <td>Clean & Jerk 5x2 85%<br>Clean pull 4x2 90%<br>Back squat 1x5 70%, 1x5 80%, 1x5* 90%</td> 
    </tr> 
    <th colspan="5"><b>Week 3</b></th> 
    <tr class = "days"> 
     <td><i>Day 1</i></td> 
     <td><i>Day 2</i></td> 
     <td><i>Day 3</i></td> 
     <td><i>Day 4</i></td> 
     <td><i>Day 5</i></td> 
    </tr> 
    <tr class = "wk3"> 
    <td>Snatch 5x1 90%<br>Snatch pull 4x1 95%<br>Front squat 5x1 90%</td> 
    <td>Pull ups 4x3<br>Bench 1x5 75%, 1x5 85%, 1x5* 95%<br>Dips 4x6<br>Barbell row 4x10</td> 
    <td>Jerk 5x1 90%<br>OHP 1x5 75%, 1x5 85%, 1x5* 95%<br>Overhead squat 4x1</td> 
    <td>Pull ups ladder<br>Dips ladder<br>Curls<br>Abs</td> 
    <td>Clean & Jerk 5x1 90%<br>Clean pull 4x1 100%<br>Back squat 1x5 75%, 1x5 85%, 1x5* 95%</td> 
    </tr> 
    <th colspan="5"><b>Week 4</b></th> 
    <tr class = "days"> 
     <td><i>Day 1</i></td> 
     <td><i>Day 2</i></td> 
     <td><i>Day 3</i></td> 
     <td><i>Day 4</i></td> 
     <td><i>Day 5</i></td> 
    </tr> 
    <tr class = "wk4"> 
    <td>Snatch 5x1 60%<br>Snatch pull 4x1 60%<br>Front squat 5x1 60%</td> 
    <td>Pull ups 4x6<br>Bench 1x5 40%, 1x5 50%, 1x5 60%<br>Dips 4x6<br>Barbell row 4x10</td> 
    <td>Jerk 5x1 60%<br>OHP 1x5 40%, 1x5 50%, 1x5 60%<br>Overhead squat 4x1</td> 
    <td>Pull ups ladder<br>Dips ladder<br>Curls<br>Abs</td> 
    <td>Clean & Jerk 5x1 60%<br>Clean pull 4x1 60%<br>Back squat 1x5 40%, 1x5 50%, 1x5 60%</td> 
    </tr> 
</table> 
</div> 
</div>

而CSS：

table { 
    width: 90%; 
    border-collapse: collapse; 
    margin: auto; 
    -webkit-box-shadow: 0 10px 6px -6px #777; 
    -moz-box-shadow: 0 10px 6px -6px #777; 
    box-shadow: 0 10px 6px -6px #777; 
    margin-bottom: 50px; 
    } 

td, th { 
    width: 20%; 
    text-align: left; 
    vertical-align: top; 
    border: 1px solid rgba(0,0,0,0.5); 
    border-spacing: 0; 
    border-collapse: collapse; 
    padding-left: 1%; 
    } 

td { 
    font-family: 'Roboto Slab', serif; 
    Color: rgba(0,0,0,0.87); 
    -webkit-font-smoothing: antialiased; 
    letter-spacing: .01rem; 
    font-weight: 400; 
    font-style: normal; 
    font-size: 18px; 
    line-height: 1.5; 
    } 
th { 
    font-family: 'Lato', sans-serif; 
    Color: rgba(0,0,0,0.87); 
    -webkit-font-smoothing: antialiased; 
    letter-spacing: .01rem; 
    font-weight: 400; 
    font-style: normal; 
    font-size: 20px; 
    line-height: 1.5; 
    } 

@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px){ 

h2 { 
    margin-bottom: 20px; 
} 

table, thead, tbody, th, td, tr { 
     width: 90%; 
     display: block; 
     position: relative; 
     float: left; 

    } 
#tbl-cont { 
    width:100%; 
} 

#tbl { 
    /*width: 90%;*/ 
    max-width: 85%; 
    min-width: 319px; 
    margin: auto; 
} 

th { 
    display: none; 
    } 
.days { 
    display: none; 
    } 

td { 
    padding-left: 50%; 
    } 
td:before { 
    max-width:27%; 
} 
.wk1 td,.wk2 td,.wk3 td,.wk4 td { 
    display: block; 
} 

.wk1 tr,.wk2 tr,.wk3 tr,.wk4 tr { 
    margin-left:-30px; 
    padding:0; 
} 
.wk1 td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     padding-right: 10px; 
     /*white-space: nowrap;*/ 
     display:block; 
    } 
.wk2 td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     padding-right: 10px; 
     /*white-space: nowrap;*/ 
     display:block; 
    } 
.wk3 td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     padding-right: 10px; 
     /*white-space: nowrap;*/ 
     display:block; 
    } 
.wk4 td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     padding-right: 10px; 
     /*white-space: nowrap;*/ 
     display:block; 
    } 

.wk1 td:nth-of-type(1):before { content: "Week 1 - Day 1"; } 
.wk1 td:nth-of-type(2):before { content: "Week 1 - Day 2"; } 
.wk1 td:nth-of-type(3):before { content: "Week 1 - Day 3"; } 
.wk1 td:nth-of-type(4):before { content: "Week 1 - Day 4"; } 
.wk1 td:nth-of-type(5):before { content: "Week 1 - Day 5"; } 
.wk2 td:nth-of-type(1):before { content: "Week 2 - Day 1"; } 
.wk2 td:nth-of-type(2):before { content: "Week 2 - Day 2"; } 
.wk2 td:nth-of-type(3):before { content: "Week 2 - Day 3"; } 
.wk2 td:nth-of-type(4):before { content: "Week 2 - Day 4"; } 
.wk2 td:nth-of-type(5):before { content: "Week 2 - Day 5"; } 
.wk3 td:nth-of-type(1):before { content: "Week 3 - Day 1"; } 
.wk3 td:nth-of-type(2):before { content: "Week 3 - Day 2"; } 
.wk3 td:nth-of-type(3):before { content: "Week 3 - Day 3"; } 
.wk3 td:nth-of-type(4):before { content: "Week 3 - Day 4"; } 
.wk3 td:nth-of-type(5):before { content: "Week 3 - Day 5"; } 
.wk4 td:nth-of-type(1):before { content: "Week 4 - Day 1"; } 
.wk4 td:nth-of-type(2):before { content: "Week 4 - Day 2"; } 
.wk4 td:nth-of-type(3):before { content: "Week 4 - Day 3"; } 
.wk4 td:nth-of-type(4):before { content: "Week 4 - Day 4"; } 
.wk4 td:nth-of-type(5):before { content: "Week 4 - Day 5"; } 
}

如果有人可以讓我知道爲什麼該表是關閉在媒體查詢中心，這將是大加讚賞。

來源

2015-03-19 userNick

它看起來不像表格ID偏離中心。 – 2015-03-19 02:03:21

請爲這種情況提供一個_live_示例，以便不是每個想快速查看所描述效果的人都必須開始複製並粘貼狂歡...... – CBroe 2015-03-19 02:16:36

快速回答：您的td標籤比表格寬。在下面進行更改。

table, thead, tbody, th, td, tr { 
    width: 100%; 
... 

td { 
    box-sizing: border-box; 
    padding-left:50%; 
}

長答案：您的CSS越來越複雜。您的規則

table, thead, tbody, th, td, tr { 
    width: 90%;

使您的佈局複雜化。

所以你有一個包含你的表的div，設置爲身體的85％的寬度。那麼你的桌子就是這個寬度的90％。那麼你的體積就是桌子的90％（縮小）。那麼你的tr是你的tbody的90％（縮小的更多）然後是你的td ...在這一點上你的td標籤的寬度與表格沒有邏輯關係，它只是一些任意寬度 - 然後添加50％的填充在他們的左邊。

我不明白爲什麼tds的寬度需要（100％* 90％* 90％* 90％* 90％）+ 50％或任何公式。簡化！

看看盒子大小，因爲這解決了與添加填充擴大你的tds問題。

來源

2015-03-19 02:12:08

謝謝！這解決了它。是的，我知道我真的需要努力簡化它，現在它非常馬虎。 – userNick 2015-03-19 02:19:40

我通常不會想到做一個響應式表格，但您所做的基本上是如何製作響應式電子郵件模板。：d – 2015-03-19 02:27:41

響應表在媒體查詢中添加邊距？

回答

相關問題