你好

Question

我创建了一个半响应表，通过媒体查询将其从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"; }
}

如果有人能让我知道为什么桌子在媒体查询中偏离中心，我们将非常感激。

Answer 1

快速回答：您的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。

Answer 2

你好

亲爱的，我希望您使用bootstrap，对吧？

那么，您是否要制作像这样的响应表demo 可以流这个或更多帮助HELP

响应表在媒体查询中添加保证金？

2 个答案:

你好