如何定位表格以覆蓋頁面的整個寬度

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