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

Question

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

/* 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 */ 
 
}

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

Answer 1

删除.t1 tbody { display: block; }

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

Answer 2

尝试：

HTML：

在表中，U可以添加width

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

CSS

在CSS属性中删除display

.t1 tbody { display: block; }