テーブルの行をテーブルの幅の外側に広げるにはどうすればいいですか？

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

列を埋めるために列をまたがっ使用。標準テーブルマークアップで

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