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

Question

I have a table inside a div ( .content )

When I resize the screen and re-fresh, the schedule table is always wider than its container div.

I use Chrome F12 tools to debug it, add/remove css. I tried to put on padding-left/right but does not work, tried to shrink the font size, which does not work.

The table cells ie td seems not resize accordingly.

Here is the url : 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>

How to reproduce the issue

Simply resizing the window will not trigger the issue. What I do to trigger it is

1. open it with your real mobile devices or,

2. If you are using Chrome, F12 then click the Mobile mode and choose a small screen mobile, AND press Ctrl + F5 to refresh the page

   If you are using Firefox, press F12 then click the "Responsive Design Mode" AND press Ctrl + F5 to refresh the page.

Here is what it will look like in Chrome and Firefox.

Answer 1

It's because of the titles within th . You need to reduce the font-size of th

Something like this should help:

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