Question

我有一张{max-width：100％}的表格在Chrome中比其父容器<div class="entry-content">宽。我已经在stackoverflow上查看了一些Q＆amp; A，但没有找到可行的解决方案。

实时代码在此处：http://vivesco-mhf.com.au/test2/有问题的表格位于“我们提供的当前小组健身课程”下方 - 健身课程表，源代码第384行。

A jsfiddle I couldn't replicate the problem with is here。我很想看到一个关于如何用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行：

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

尝试更改填充：padding: 6px 20px;或添加字体大小：font-size:15px;

表格最大宽度为100％

1 个答案: