首页 > 语言 > JavaScript > 正文

JS实现控制表格行内容垂直对齐的方法

2024-05-06 16:17:50
字体:
来源:转载
供稿:网友

这篇文章主要介绍了JS实现控制表格行内容垂直对齐的方法,通过javascript的getElementById获取元素并设置其相应样式来实现这一功能,需要的朋友可以参考下

本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。具体分析如下:

下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶、可以居中、可以底部对齐

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script> 
  5. function topAlign() 
  6. document.getElementById('tr2').vAlign="top"
  7. </script> 
  8. </head> 
  9. <body> 
  10. <table width="50%" border="1"
  11. <tr id="tr1"
  12. <th>Firstname</th> 
  13. <th>Lastname</th> 
  14. <th>Text</th> 
  15. </tr> 
  16. <tr id="tr2"
  17. <td>Peter</td> 
  18. <td>Griffin</td> 
  19. <td>Hello my name is Peter Griffin. 
  20. I need a long text for this example. 
  21. I need a long text for this example.</td> 
  22. </tr> 
  23. </table> 
  24. <br> 
  25. <input type="button" onclick="topAlign()" value="Top-align table row" /> 
  26. </body> 
  27. </html> 

希望本文所述对大家的javascript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选