表格的头不动,内容可以滚动

本文提供了一个使用HTML创建表格布局的实例代码。该表格包含头部和数据行,并使用了简单的样式进行美化。通过这个例子,读者可以了解如何定义表格结构及如何应用基本的样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以下代码是通过百度找到 的

  1. <table width="300"  border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
  2.   <tr> 
  3.     <th width="25%" nowrap><font color="#FFFFFF"> 123 </font></th>
  4.     <th width="25%" nowrap><font color="#FFFFFF"> 456 </font></th>
  5.     <th width="25%" nowrap><font color="#FFFFFF"> 789 </font></th>
  6.     <th width="25%" nowrap><font color="#FFFFFF"> abc </font></th>
  7.   </tr>
  8. </table>
  9. <span style="overflow-y:auto;height:100px;width:320px">
  10. <table width="300"  border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
  11.   <tr bgcolor="#FFFFFF"> 
  12.     <td width="25%"> 1</td>
  13.                 
  14.     <td width="25%"> 4</td>
  15.                 
  16.     <td width="25%"> 7</td>
  17.                 
  18.     <td width="25%"> a</td>
  19.         </tr>
  20.         
  21.   <tr bgcolor="#FFFFFF"> 
  22.     <td > 2</td>
  23.                 
  24.     <td > 5</td>
  25.                 
  26.     <td> 8</td>
  27.                 
  28.     <td> b</td>
  29.         </tr>
  30.         
  31.   <tr bgcolor="#FFFFFF"> 
  32.     <td> 3 </td>
  33.                 
  34.     <td> 6 </td>
  35.                 
  36.     <td> 9 </td>
  37.                 
  38.     <td > c </td>
  39.         </tr>
  40.   <tr bgcolor="#FFFFFF"> 
  41.     <td> 3 </td>
  42.                 
  43.     <td> 6 </td>
  44.                 
  45.     <td> 9 </td>
  46.                 
  47.     <td > c </td>
  48.         </tr>
  49.   <tr bgcolor="#FFFFFF"> 
  50.     <td> 3 </td>
  51.                 
  52.     <td> 6 </td>
  53.                 
  54.     <td> 9 </td>
  55.                 
  56.     <td > c </td>
  57.         </tr>
  58.   <tr bgcolor="#FFFFFF"> 
  59.     <td> 3 </td>
  60.                 
  61.     <td> 6 </td>
  62.                 
  63.     <td> 9 </td>
  64.                 
  65.     <td > c </td>
  66.         </tr>
  67.   <tr bgcolor="#FFFFFF"> 
  68.     <td> 3 </td>
  69.                 
  70.     <td> 6 </td>
  71.                 
  72.     <td> 9 </td>
  73.                 
  74.     <td > c </td>
  75.         </tr>
  76.   <tr bgcolor="#FFFFFF"> 
  77.     <td> 3 </td>
  78.                 
  79.     <td> 6 </td>
  80.                 
  81.     <td> 9 </td>
  82.                 
  83.     <td > c </td>
  84.         </tr>
  85.   <tr bgcolor="#FFFFFF"> 
  86.     <td> 3 </td>
  87.                 
  88.     <td> 6 </td>
  89.                 
  90.     <td> 9 </td>
  91.                 
  92.     <td > c </td>
  93.         </tr>
  94.   <tr bgcolor="#FFFFFF"> 
  95.     <td> 3 </td>
  96.                 
  97.     <td> 6 </td>
  98.                 
  99.     <td> 9 </td>
  100.                 
  101.     <td > c </td>
  102.         </tr>
  103.   <tr bgcolor="#FFFFFF"> 
  104.     <td> 3 </td>
  105.                 
  106.     <td> 6 </td>
  107.                 
  108.     <td> 9 </td>
  109.                 
  110.     <td > c </td>
  111.         </tr>
  112.   <tr bgcolor="#FFFFFF"> 
  113.     <td> 3 </td>
  114.                 
  115.     <td> 6 </td>
  116.                 
  117.     <td> 9 </td>
  118.                 
  119.     <td > c </td>
  120.         </tr>
  121. </table>
  122. </span> 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值