如何防止表超过其div容器？

Question

更新1：如何重现问题

简单地调整窗口大小不会触发问题。我要做的是触发它

1. 使用您的真实移动设备打开它，或

2. 如果您使用的是Chrome，F12然后点击移动模式并选择小屏幕移动设备，然后按Ctrl + F5刷新页面

   如果您使用的是Firefox，请按F12，然后点击“自适应设计模式”并按Ctrl + F5刷新页面。

以下是Chrome和Firefox中的内容。谢谢。



我在div（.content）

中有一个表

当我调整屏幕大小并重新刷新时，计划表总是比容器div宽。

我使用Chrome F12工具对其进行调试，添加/删除css。我试图在左/右填充但不起作用，试图缩小字体大小，这不起作用。

表格单元格，即td似乎没有相应地调整大小。请帮忙。

以下是网址：http://liferunningclub.com.au/

/*schedule*/
.schedule {
  background: url('img/schedules.jpg') no-repeat center center;
  width: 100%;
  margin: 0;
  text-align:center;
}

.schedule .content { padding:85px 0 95px; text-align:center;}
.schedule h2 { background:url(img/red-border.jpg) no-repeat center bottom !important; padding-bottom:22px; margin-bottom:55px;} 
.schedule .half { width:50%; margin:0 -3px 0 0; float:left}
.schedule table { width:100%}
.schedule table td { background:rgba(255,255,255,0.1); text-transform:uppercase; padding:12px; color:#fff;font-family: 'dinprolight'; font-size:20px; line-height:24px; width:33%}
.schedule table .first-row td { background:#e80f41}
.schedule table .second-row td { background:#c50f3c}
.schedule table .third-row td { background:#a60a31}
.schedule table td.empty {background:rgba(255,255,255,0.1) !important; } 
.schedule table thead td { font-size:24px;font-family: 'dinpro-black-webfont';}
.schedule table td span { display:block;font-family: 'dinpro-black-webfont';}

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; *zoom: 1}
.clearfix { display: inline-block}
.clear { clear:both; line-height:0; height:1px; font-size:0}
html[xmlns] .clearfix { display: block}
* html .clearfix {height: 1%}


/*medium*/
@media screen and (min-width: 730px) and (max-width: 960px) {

.content .clearfix { padding-left: 20px!important; padding-right: 20px!important; }

.schedule .half { float: none; width: 100%; margin-bottom: 20px }

.half { width: 100%; float: none; margin-right: 0; margin-bottom: 10px; }
}

/*small*/
@media screen and (max-width: 729px) {

.content .clearfix { padding-left: 20px!important; padding-right: 20px!important; }

.schedule .half { float: none; width: 100%; margin-bottom: 20px }

.schedule .content { padding: 60px 0; }

.half { width: 100%; float: none; margin-right: 0; margin-bottom: 10px; }

    .schedule td p {
        font-size: 12px;
    }
}

/*end of schedule*/

<div class="schedule" id="schedule">
    <div class="content clearfix">
        <h2>SCHEDULE</h2>

        <div class="half">
            <table style="width:100%;" border="0" cellspacing="3">
                <thead>
                    <tr>
                        <td scope="row">Monday</td>
                        <td>Tuesday</td>
                        <td>Wednesday</td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="first-row">
                        <td scope="row">
                            <p>
                                6:30AM <span>ESSENDON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                6:30AM <span>CARLTON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                6:30AM <span>ESSENDON</span>
                            </p>
                        </td>
                    </tr>
                    <tr class="second-row">
                        <td scope="row">
                            <p>
                                5:15PM<span>CARLTON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                6:00PM<span>ESSENDON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                5:15PM<span>CARLTON</span>
                            </p>
                        </td>
                    </tr>
                    <tr class="third-row">
                        <td scope="row">
                            <p>
                                6:00PM<span>CARLTON</span>
                            </p>
                        </td>
                        <td class="empty"></td>
                        <td>
                            <p>
                                6:00PM<span>CARLTON</span>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="half">
            <table style="width:100%;" border="0" cellspacing="3">
                <thead>
                    <tr>
                        <td>Thursday</td>
                        <td>Friday</td>
                        <td>Saturday</td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="first-row">
                        <td>
                            <p>
                                6:30AM <span>CARLTON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                6:30AM <span>ESSENDON</span>
                            </p>
                        </td>
                        <td>
                            <p>
                                8:15AM <span>ESSENDON</span>
                            </p>
                        </td>
                    </tr>
                    <tr class="second-row">
                        <td>
                            <p>
                                8:15AM<span>ESSENDON</span>
                            </p>
                        </td>
                        <td class="empty"></td>
                        <td>
                            <p>
                                10:00AM<span>CARLTON</span>
                            </p>
                        </td>
                    </tr>
                    <tr class="third-row">
                        <td>
                            <p>
                                6:00PM<span>ESSENDON</span>
                            </p>
                        </td>
                        <td class="empty"></td>
                        <td class="empty"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

这是因为th中的标题。你需要减少font-size

这样的事情应该会有所帮助：

.schedule table thead td{
 font-size:18px;
}