table滚动条

< html>

< head>

< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">

< style type= "text/css">

table {

border: #888FEA 1 px solid;

border-spacing: 0 px;

text-align: center;

}

th, tr, td {

border: #888FEA 1 px solid;

}

th {

background-color: #98AEFD;

}

#id {

width: 40 px;

}

#c1 {

width: 150 px;

}

</ style>

</ head>

< body>

< table style= "width: 300px;">

< tr>

< th id= "id">id</ th>

< th id= "c1">名称</ th>

< th>数量</ th>

</ tr>

< tr>

< td colspan= "3">

< div id= "list" style= "overflow-x: hidden; width: 100%; height: 120px;"> <!-- 这个是核心 -->

< table style= "margin: -2px -2px -2px -2px; width: 100%; border: 0px">

< tr>

< td id= "id">1</ td>

< td id= "c1">cat</ td>

< td>100</ td>

</ tr>

< tr>

< td id= "id">2</ td>

< td id= "c1">dog</ td>

< td>200</ td>

</ tr>

< tr>

< td id= "id">3</ td>

< td id= "c1">bird</ td>

< td>150</ td>

</ tr>

< tr>

< td id= "id">4</ td>

< td id= "c1">mouse</ td>

< td>1000</ td>

</ tr>

< tr>

< td id= "id">5</ td>

< td id= "c1">tiger</ td>

< td>1</ td>

</ tr>

< tr>

< td id= "id">6</ td>

< td id= "c1">monkey</ td>

< td>3</ td>

</ tr>

< tr>

< td id= "id">7</ td>

< td id= "c1">snake</ td>

< td>99</ td>

</ tr>

< tr>

< td id= "id">8</ td>

< td id= "c1">flower</ td>

< td>999</ td>

</ tr>

< tr>

< td id= "id">9</ td>

< td id= "c1">bug</ td>

< td>0</ td>

</ tr>

</ table>

</ div>

</ td>

</ tr>

</ table>

</ body>

</ html>