我创建了一个半响应表，通过媒体查询将其从5列拆分为2列（这是一个在移动设备上分解为单独日期的日历）。它几乎完全按照我想要的方式工作，但是桌子略微偏离中心（看起来大约是10px到右边），当我期望它居中时因为桌子在一个带有margin的div中：auto，在容器div内部，宽度为：100％。
这是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"; }
}
如果有人能让我知道为什么桌子在媒体查询中偏离中心，我们将非常感激。
答案 0 :(得分：0)
快速回答：您的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比你的t宽90％（缩小更多）然后你的td ...此时你的td标签的宽度与表没有逻辑关系，它只是一些任意宽度 - 然后添加50％填充在他们的左边。
我不知道为什么会这样做。宽度需要（100％* 90％* 90％* 90％* 90％）+ 50％或任何公式。简化！
查看大小调整大小，因为这会解决问题，添加的填充扩展了你的tds。
答案 1 :(得分：0)