如何定位表格以覆盖整个页面宽度

Question

我有一个以下代码来显示表格。但我不确定如何将它放在全宽范围内。将tbody定义为可滚动的块。删除那些块行时，我可以得到预期的结果。但我想要滚动以及全宽度拉伸。请有人帮助我。

＆＃13;

＆＃13;

/* table-itemtable styles */
.t1 table { border-collapse: collapse; }
.t1 th, td { text-align: center; padding: 8px;}
.t1 th {background-color: #4CAF50; color: white;}
.t1 tr {border-bottom: 1px solid;}
.t1 tbody { display: block; }
.t1 tbody {
    height: 300px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

＆＃13;

<table cellspacing="0" id="itemtable" class="t1">
  <tr>
    <th> SLno</th>
    <th>Item name</th>
    <th>Item code</th>
  </tr>
  <tr>
    <td>1</td>
    <td>icecream</td>
    <td>100</td>
  </tr>
  <tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
<tr>
    <td>2</td>
    <td>biscuits</td>
    <td>200</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除.t1 tbody { display: block; }

http://codepen.io/anon/pen/GWOYNL

Answer 2

<强>尝试：

<强> HTML：

在表格中，您可以添加width

<table cellspacing="0" id="itemtable" class="t1" width="100%">

<强> CSS

在CSS属性中，删除display

.t1 tbody { display: block; }