桌子没有伸展到全宽

Question

I've looked at all of the other threads regarding this topic but none have been able to help me.

I'm creating forums, and I'm using a table to sort everything but it seems the table won't stretch to the full 100% width of the parent div. The parent div's width is 893.906 pixels (using percentages in css) and the table's width is 893 pixels. I've tried changing the display value but it doesn't seem to do anything.

Screenshot: http://prntscr.com/8wijqj

table 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 for module and table

.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

Try changing to this:

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

JSFiddle

Answer 2

Oddly enough, if you remove width: 100%; from the module-header, it shrinks back to the same size as the module-body.

If you remove display:block; from the table, it expands up to match.

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

See fiddle: http://jsfiddle.net/zqjLz2qu/

Answer 3

.module-header has width: 100% and borders of 1px. Therefore, its total width is 100% + 2px .

.module-body is a block, so it will fill 100% of the containing block.

If you want to include the borders in width use 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>