响应表在媒体查询中添加边距？

我创建了一个半响应表，通过媒体查询（这是一个在手机中分解成单个日历的日历）从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

响应表在媒体查询中添加边距？

回答

相关问题