Question

我已经查看了有关此主题的所有其他主题，但没有一个能够帮助我。

我正在创建论坛，我正在使用表格对所有内容进行排序，但似乎表格不会延伸到父div的100％宽度。父div的宽度为893.906像素（使用css中的百分比），表的宽度为893像素。我尝试过更改显示值，但似乎没有做任何事情。

表格html

text

css for module and table

<div class="module">
    <div class="module-header"><h4>Test Forum</h4></div>
    <div class="module-body">
        <table class="table discussions">
            <colgroup>
                <col class="width70">
                <col class="width10">
                <col class="width20">
            </colgroup>
            <thead>
                <tr>
                    <th>Thread Title</th>
                    <th class="count">Replies</th>
                    <th>Last Update</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="http://www.danksidecs.com/index.php?p=forums&c=viewthread&cid=1&fid=1&tid=1">This is a test thread!</a><br /><span class="text-muted">created <abbr class="timeago" title="2015-10-17 00:00:00"></abbr> by <abbr class="timeago">skruffysdeveloper</a></span></td>
                    <td class="count">0</td>
                    <td><abbr class="timeago" title="0000-00-00 00:00:00"></abbr> by None</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

尝试更改为：

.table { width: 100%; margin-bottom: 0; display: table; }

JSFiddle

Answer 2

奇怪的是，如果从模块标题中删除width: 100%;，它会缩小回与模块体相同的大小。

如果您从表格中移除display:block;，它会向上展开以匹配。

.module-header {
  /*width: 100%;*/
  height: 45px;
  background-color: #3B6C8E;
  border-left: 1px solid #3B6C8E;
  border-right: 1px solid #3B6C8E;
}
.table { width: 100%; margin-bottom: 0; }

见小提琴： http://jsfiddle.net/zqjLz2qu/

Answer 3

.module-header有width: 100%，边界为1px。因此，其总宽度为100% + 2px。

.module-body是一个块，因此它将填充包含块的100%。

如果您想在width使用box-sizing: border-box。

中加入边框

.module {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-bottom: 20px;
}
.module-header {
  width: 100%;
  height: 45px;
  background-color: #3B6C8E;
  border-left: 1px solid #3B6C8E;
  border-right: 1px solid #3B6C8E;
  box-sizing: border-box;
}
.module-header h4 {
  font-family: RobotoRegular, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  line-height: 45px;
  padding-left: 10px;
  margin: 0;
}
.module-padding {
  padding: 10px;
}
.module-body {
  display: block;
  background-color: #F5F5F5;
}
.module-body p {color: #222222;}
.table { width: 100%; margin-bottom: 0; display: block; }
.table thead { width: 100%; background-color: rgb(51, 51, 51); border-left: 1px solid rgb(51, 51, 51); border-right: 1px solid rgb(51, 51, 51); }
.table thead th { color: #ffffff; font-family: RobotoRegular, 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; font-size: 14px; }
.table tbody { width: 100%; }
.table tbody tr { border: 1px solid #ccc; }
.table tbody td { font-family: RobotoRegular, 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; font-size: 12px; }
.width5 { width: 5%; }
.width10 { width: 10%; }
.width15 { width: 15%; }
.width20 { width: 20%; }
.width30 { width: 30%; }
.width45 { width: 45%; }
.width60 { width: 60%; }
.width65 { width: 65%; }
.width63 { width: 63%; }
.width70 { width: 70%; }
.width75 { width: 75%; }

<div class="module">
  <div class="module-header"><h4>Test Forum</h4></div>
  <div class="module-body">
    <table class="table discussions">
      <colgroup>
        <col class="width70">
        <col class="width10">
        <col class="width20">
      </colgroup>
      <thead>
        <tr>
          <th>Thread Title</th>
          <th class="count">Replies</th>
          <th>Last Update</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="http://www.danksidecs.com/index.php?p=forums&c=viewthread&cid=1&fid=1&tid=1">This is a test thread!</a><br /><span class="text-muted">created <abbr class="timeago" title="2015-10-17 00:00:00"></abbr> by <abbr class="timeago">skruffysdeveloper</a></span></td>
          <td class="count">0</td>
          <td><abbr class="timeago" title="0000-00-00 00:00:00"></abbr> by None</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

桌子没有伸展到全宽

3 个答案: