テーブルの最大幅を100％に設定

Question

Chromeで親コンテナの<div class="entry-content">より広い{max-width：100％}のテーブルがあります。私はいくつかのQ &のstackoverflowのを見て、動作するソリューションが見つかりませんでした。

ライブコードはここにあります：http://vivesco-mhf.com.au/test2/問題のテーブルは、「私たちが提供している現在のグループフィットネスクラス」の下にあります - フィットネスクラスのスケジュール、ソースコードの384行。

A jsfiddle I couldn't replicate the problem with is here。私のような人々はstackoverflowの少ない気ができるよう、私は、jsfiddleとCSSの問題にアプローチする方法についての正式なガイドを見てみたい... ;-)

HTML：

<section id="container" class="two-columns-right"> 
    <div id="content" role="main"> 
    <div id="post-4818" class="post-4818 page type-page status-publish hentry"> 
     <div class="entry-content"> 
     <table> 
      <tbody> 
      <tr style="background-color: #333333; color: #ff9900;"> 
       <td width="10%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"><strong><span style="color: #ff9900;">MON</span></strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"><strong><span style="color: #ff9900;">TUE</span></strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"><strong><span style="color: #ff9900;">WED</span></strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"><strong><span style="color: #ff9900;">THUR</span></strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"><strong><span style="color: #ff9900;">SAT</span></strong></td> 
      </tr> 
      <tr> 
       <td width="10%" style="border-color: #c2c2c2;">&nbsp;<strong>05.30am</strong></td> 
       <td width="18%" style="border-color: #c2c2c2;">Cardio Punch<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;">FBI-A<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;">Cardio Punch<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
      </tr> 
      <tr> 
       <td width="10%" style="border-color: #c2c2c2;">&nbsp;<strong>06.30am</strong></td> 
       <td width="18%" style="border-color: #c2c2c2;">FBI-A<br> 
       St. Elizabeth’s Primary School<br> 
       Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;">Cardio Punch<br> 
       St. Elizabeth’s Primary School<br> 
       Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;">FBI-A<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
      </tr> 
      <tr> 
       <td width="10%" style="border-color: #c2c2c2;"><strong>07.00am</strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;">Cardio Punch<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
      </tr> 
      <tr> 
       <td width="10%" style="border-color: #c2c2c2;">&nbsp;<strong>05.00pm</strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;">Cardio Punch<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
      </tr> 
      <tr> 
       <td width="10%" style="border-color: #c2c2c2;"><strong>06.00pm</strong></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;">FBI-A<br> 
       St. Elizabeth’s Primary School, Hocking</td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
       <td width="18%" style="border-color: #c2c2c2;"></td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </div> 
    <div id="secondary" class="widget-area sidey" role="complementary"> 
    <ul class="xoxo"> 
     <li id="search-5" class="widget-container widget_search">test sidebar</li> 
    </ul> 
    </div> 
</section> 

CSS：

#container.two-columns-right #content { 
    width: calc(100% - 310px); 
    float: left; 
} 
#container.two-columns-right #secondary { 
    width: 280px; 
    float: right; 
} 
div.post, div.page, .yoyo > li { 
    display: block; 
    overflow: hidden; 
    padding: 0; 
    margin-bottom: 36px; 
} 
.entry-content { 
    max-width: 100%; 
} 
.entry-content, .entry-summary { 
    clear: both; 
    padding-top: 8px; 
    word-wrap: break-word; 
} 
#content table { 
    max-width: 100%; 
    border: 0; 
    margin: 0 0px 24px 0; 
    text-align: left; 
    width: 100%; 
    vertical-align: top; 
    font-size: 16px; 
    line-height: 0.9em; 
    border-collapse: collapse; 
    border-spacing: 0; 
    display: table; 
    border-collapse: collapse; 
} 
#content table td { 
    word-wrap:break-word; 
} 
.entry-content, .entry-summary { 
    word-wrap: break-word; 
} 

Answer 1

<td>の埋め込みが大きすぎるため、セルがコンテンツを適切に表示するのに十分ではありません。パディングを減らすか、フォントサイズを小さくしてみてください。

あなたはstyle.cssによりライン892を書いた：padding: 6px 20px;やフォントサイズを追加します：

#content tr td { border-top: 1px solid transparent; padding: 6px 24px; }

はパディングを変更しようとfont-size:15px;