css扩展之表格(tables)的滚动条方式(scroll-manner)

By admin at 2017-11-13 • 0人收藏 • 475人看过
<html>
<head>
  <style>
  
    table
    {
      margin:*;
      width:4*;
      height:4*;
      overflow:auto scroll-manner( page-animation:true, step-animation:true, step:auto, page:auto );
      border:1px solid black;
      background-color:white;
    }
    td { width:200px; height:100px; 
         border:1px solid gray; 
         background:gold;
         text-align:center;  }
  
  </style>  
</head>
<body>
  <h1>scroll-manner() demo on tables</h1>
  <p>The table here is configured to use animated scroll with integral steps - next step in x and y directions should move scroll position to the origin of column/row</p> 
  <table>
    <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td></tr>
    <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr>
    <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>    
    <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>    
    <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td></tr>
    <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td></tr>
    <tr><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td></tr>
    <tr><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td>76</td></tr>
    <tr><td>81</td><td>82</td><td>83</td><td>84</td><td>85</td><td>86</td></tr>    
    <tr><td>91</td><td>92</td><td>93</td><td>94</td><td>95</td><td>96</td></tr>    
  </table>


</body>
</html>

blob.png

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...