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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
js遍历td tr等html元素
Dec 13 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
three.js 入门案例详解
Jan 23 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
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2014年工程师工作总结
2014/11/25 职场文书
公司表扬稿范文
2015/05/05 职场文书
百年孤独读书笔记
2015/06/29 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
python多次执行绘制条形图
2022/04/20 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL