如何使一个表格行扩展到表格其余部分的宽度之外？

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>