HTML下的table滚动实现

HTML下的table滚动实现,第1张

1、首先打开myeclipse获取idea这样的编辑器,在编辑器中写一个table标签,这里给出table的值。

2、然后可以在页面中看到此时展示的是没有样式的table样板,此时所有的数据没有经过渲染,比较紧凑,也不是一个页面展示。

3、可以在table中引入样式标签style来设计table的样式。

4、还可以使用内部元素,使用jquery ,在jquery中首先给table一个class属性,在JavaScript中通过.class属性获取这个table,给出样式设计。

5、根据上面的设计再经过背景、宽度、高度的设计,可以设计出一个比较好看的table。

1.<!--div比table大小要小才会显示-->

2.<div style="overflow-x: auto overflow-y: auto height: 100px width:200px">

3.   <table id="table" border="1" align="center" width="300px" height="200px">

4. <tbody>

5.  <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>

6.  <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>

7.  <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

8.  <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

9. </tbody>

10.</table>

11. </body>

12. </div>

单元格里一样的设置 css 属性

<style type="text/css">

table.scrollable td { overflow: scroll}

</style>

<table class="scrollable">

<tr><td>.....</td></tr>

</table>

如果我的回答没能帮助您,请继续追问。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7084241.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-01
下一篇2023-04-01

发表评论

登录后才能评论

评论列表(0条)

    保存