我有两个相同的表,但当浏览器宽度发生变化时,它们的行为会有所不同。
似乎有一个溢出而另一个收缩以适应浏览器的宽度。但为什么会这样呢?
<div id="article-body">
<br>
<table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
<thead>
<tr>
<th scope="col">One Tow Three</th>
<th scope="col">Two Four One</th>
<th scope="col">Three to The One Two</th>
<th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd dlkafjsdl asdlkfj ere</th>
</tr>
</thead>
<tbody>
<tr>
<td>one cool drive</td>
<td>overdrive pedals everywhwere<br>
</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
</tbody>
</table>
<br>
<br>
<table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
<thead>
<tr>
<th scope="col">Awesome Table Here</th>
<th scope="col">Another Col</th>
<th scope="col">Another One here</th>
<th scope="col">Four Five</th>
<th scope="col">Six</th>
</tr>
</thead>
<tbody>
<tr>
<td>sjflsj</td>
<td>lgsjdfkljgslkdfgjlksdfjg</td>
<td>lsdfjgklsjfg<br>
slkfdgjlksdfjglj<br>
</td>
<td>sflkjglksfdjg</td>
<td>glksdjfgkljsf</td>
</tr>
<tr>
<td>kljfglksjdfklg</td>
<td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
<td>lfksjglkdfjglkjq1</td>
<td>sdfjglksdfjglk</td>
<td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
</tr>
</tbody>
</table>
<br>
</div>
正如您在bin中看到的那样,没有附加CSS,它们仍然表现不同。但为什么呢?
一直在追踪这个错误,所以任何帮助都会受到赞赏。
答案 0 :(得分:3)
你的桌子根本不相同。内容不同。不同数量的列。
如果您希望它们具有相同的宽度,则需要设置表格宽度。
table {
width: 100%;
}
&#13;
<div id="article-body">
<br>
<table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
<thead>
<tr>
<th scope="col">One Tow Three</th>
<th scope="col">Two Four One</th>
<th scope="col">Three to The One Two</th>
<th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd dlkafjsdl asdlkfj ere</th>
</tr>
</thead>
<tbody>
<tr>
<td>one cool drive</td>
<td>overdrive pedals everywhwere<br>
</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
</tbody>
</table>
<br>
<br>
<table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
<thead>
<tr>
<th scope="col">Awesome Table Here</th>
<th scope="col">Another Col</th>
<th scope="col">Another One here</th>
<th scope="col">Four Five</th>
<th scope="col">Six</th>
</tr>
</thead>
<tbody>
<tr>
<td>sjflsj</td>
<td>lgsjdfkljgslkdfgjlksdfjg</td>
<td>lsdfjgklsjfg<br>
slkfdgjlksdfjglj<br>
</td>
<td>sflkjglksfdjg</td>
<td>glksdjfgkljsf</td>
</tr>
<tr>
<td>kljfglksjdfklg</td>
<td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
<td>lfksjglkdfjglkjq1</td>
<td>sdfjglksdfjglk</td>
<td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
</tr>
</tbody>
</table>
<br>
</div>
&#13;
答案 1 :(得分:1)
我因为你的专栏而假设它。您在最后一个表格中有一列额外的内容。
编辑:这是因为th标签被其中的内容拉伸。宽度随着内容的宽度而拉伸。