如何使一個表格行擴展到表格其餘部分的外部寬度？

Question

我有一個HTML表和最後一行需要擴展頁面的整個寬度，而行的其餘部分與左側保證金居中，右像這樣：

#mytable { 
    margin: auto; 
    width: 90%; 
} 

這是可能的？

#mytable { 
 
    margin: auto; 
 
    width: 90%; 
 
} 
 

 
#mytable th, 
 
#mytable td { 
 
    padding: 0.8em; 
 
    border: 1px solid; 
 
} 
 

 
#mytable th { 
 
    background-color: #6699FF; 
 
    font-weight: bold; 
 
} 
 

 
#container { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#last-row { 
 
    background-color: blue; 
 
}

<div id="container"> 
 
    <table id="mytable"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Columna</th> 
 
     <th>Relative</th> 
 
     <th>Isso</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>This</td> 
 
     <td>Column</td> 
 
     <td>Is</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Column</td> 
 
     <td>two</td> 
 
     <td>this</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>is</td> 
 
     <td>not equals</td> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>the</td> 
 
     <td>Column</td> 
 
     <td>real</td> 
 
    </tr> 
 
    <tr id="last-row"> 
 
     <td>5</td> 
 
     <td>first</td> 
 
     <td>One</td> 
 
     <td>Column</td> 
 
    </tr> 
 
    </table> 
 
</div>

這裏有一個的jsfiddle：

https://jsfiddle.net/zvjaep1q/

Answer 1

使用colspan設爲橋柱。

#mytable { 
 
    margin: auto; 
 
    width: 90%; 
 
} 
 

 
#mytable th, 
 
#mytable td { 
 
    padding: 0.8em; 
 
    border: 1px solid; 
 
} 
 

 
#mytable th { 
 
    background-color: #6699FF; 
 
    font-weight: bold; 
 
} 
 

 
#container { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#last-row { 
 
    background-color: blue; 
 
}

<div id="container"> 
 
    <table id="mytable"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Columna</th> 
 
     <th>Relative</th> 
 
     <th>Isso</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>This</td> 
 
     <td>Column</td> 
 
     <td>Is</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Column</td> 
 
     <td>two</td> 
 
     <td>this</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>is</td> 
 
     <td>not equals</td> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>the</td> 
 
     <td>Column</td> 
 
     <td>real</td> 
 
    </tr> 
 
    <tr id="last-row"> 
 
     <td colspan="4">5 
 
     first 
 
     One 
 
     Column</td> 
 
    </tr> 
 
    </table> 
 
</div>