html - table 没有拉伸(stretch)到全宽

Question

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

我正在创建论坛，我正在使用表格对所有内容进行排序，但表格似乎不会拉伸(stretch)到父 div 的完整 100% 宽度。父 div 的宽度为 893.906 像素(使用 css 中的百分比)，表格的宽度为 893 像素。我试过更改显示值，但它似乎没有任何作用。

截图:http://prntscr.com/8wijqj

表格 html

<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>

模块和表格的CSS

.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;
}
.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%; }

Answer 1

试着改成这样:

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

JSFiddle