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


Posted in Javascript onMarch 30, 2015

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

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

<!DOCTYPE html>
<html>
<head>
<script>
function topAlign()
{
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello my name is Peter Griffin.
I need a long text for this example.
I need a long text for this example.</td>
</tr>
</table>
<br>
<input type="button" onclick="topAlign()" value="Top-align table row" />
</body>
</html>

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

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 #Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 #Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 #Javascript
Node.js中的流(Stream)介绍
Mar 30 #Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 #Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 #Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 #Javascript
You might like
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
js继承的实现代码
2010/08/05 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
p5.js入门教程之图片加载
2018/03/20 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
深入浅析Python中的迭代器
2019/06/04 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
领导干部作风整顿剖析材料
2014/10/11 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年材料员工作总结
2014/11/19 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL