通过JavaScript和CSS使Table居中显示

最新推荐文章于 2023-04-29 10:37:08 发布
最新推荐文章于 2023-04-29 10:37:08 发布
阅读量5.5k 收藏 2
点赞数 2
分类专栏： 网页设计 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longyuhome/article/details/9190663
版权

通过JavaScript和CSS使Table居中显示

       上篇博客说的是将div设置为居中显示，今天来分享一下如何将表格居中的显示。至于居中的原理就不说了，可以看一下我的上篇博客，这次没有使用window的两个事件，而是使用一个叫expression的函数。现在多数的浏览器都支持这个函数。在写上一篇博客的时候，我脑里想能不能把计算后的值赋给css的left和top属性呢？后来查阅资料找到了这个函数。这个函数用来把CSS属性和JavaScript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义的属性。就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于JavaScript的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

好了先看一下居中的源码吧！

可以很清楚的看到expression函数内写的值是那个总结的公式。即文档的高宽减去自身的高宽，然后除以2就是top和left的值了。将这段代码放到style属性里就居中了。如图所示：

这样就可以居中显示了。

会不会想把这段代码写到css里去呢，答案是可以的，这样之后代码就变成了如下这个样子：

这样就可以通过CSS和JavaScript使table居中的显示了，这样做登录页面的时候就好看了。很简单吧！

无处不在的海贼
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让整个table居于页面正中间（上下，左右都居中）
guocong0603的专栏
03-13 1万+
style= "position:absolute;z-index:1;left:expression((document.body.clientWidth-this.offsetWidth)/2);top:expression((document.body.clientHeight-this.offsetHeight)/2) ">       
[html+js]实现表单页面居中
哈哈哈
04-30 733
实现思路：在表单外层套一层div，设置div的样式。
js实现点table对应行用遮罩层居中竖向显示该行数据含标题
易查薪
04-29 162
【代码】js实现点table对应行用遮罩层居中竖向显示该行数据含标题。
原生js实现表格内容的居中左对齐
逍遥的码农的博客
01-07 3444
以下是试例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
div 内table 居中
Yao,Mane
07-02 1319
<br />css代码：<br />　     #dlgReply<br />        {<br />            /*display: table-cell;<br />            text-align: center;*/<br />            vertical-align: middle;<br />        }<br />        table<br />        {<br />            margin-left: auto;<br
JavaScript和CSS通过expression实现Table居中显示
10-27
本文将详细介绍如何利用JavaScript和CSS的`expression`函数实现表格的居中显示。 首先，`expression`函数是早期Internet Explorer浏览器（主要是IE5和IE6）支持的一种特性，它允许我们将CSS属性与JavaScript表达式...
layui的table中显示图片方法
10-18
layui是一个流行的前端JavaScript框架，提供了丰富的组件，包括表格（table），用于构建数据展示和交互的界面。在layui的table中显示图片需要利用其内置的模板功能和自定义样式，以确保图片能够在单元格中正确展示。...
div+css table布局实现代码
09-27
【div+css table布局实现代码】是一个关于使用CSS模拟HTML表格布局的技术，目的是为了在不使用`<table>`标签的情况下，实现多个容器等高并排显示的效果。这种布局方式常见于网页设计，允许内容在各自容器中居中或...
bootstrap table合并行数据并居中对齐效果
10-17
以下是一个完整的 HTML 和 JavaScript 示例，展示了如何创建一个包含合并行数据并居中对齐的 Bootstrap Table： ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/...
（4种）实现垂直居中的方法总结
周周池的博客
04-18 3612
如果父元素的height不写，只需要设置父元素padding:10px 0;就可以将子元素垂直居中； 如果父元素的height写死了，就比较难垂直居中，以下是垂直居中的几种方法。 使用table自带的功能实现垂直居中。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> &l
javaScript Excel 导出 - 设置列宽，居中，样式
Dily_Su的博客
01-17 5505
使用 Lay-Excel插件，原本使用 xlsx.js 实现的，但是后来发现xlsx.js 中样式实现存在bug无法解决，于是改用lay-excel，lay-excel其实也是对xlsx.js 的封装，而本文则是对其进一步封装！！！
HTML网页中table居中和表格内容居中
巴里大叔的博客
10-23 6万+
HTML网页中table居中和表格内容居中 1、html中让表格在浏览器中左右居中，可以设置表格的align属性 align三个属性:居中：center；靠左：left；靠右：right。 2、在表格td中，有两个属性控制居中显示 align：表示左右居中，left，center，right valign：控制上下居中，top, middle, bottom 3、...
jsp页面table表格上下左右居中
quge_name_harder的博客
09-30 2万+
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@taglib uri="/struts-tags" prefix="s"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio
界面让table居中的办法
Cherry
05-01 1万+
以前老的办法是   用的是align属性，但是这个align如果你放在css中，就会发现毛用没有了。只能写在界面中。 table{ align:center; } 以上的方法虽然简单，但是align属性官方已经不推荐使用了，推荐使用 float:属性，但是这个属性有没有居中的值，这就蛋疼了。 还好有其他办法也是可以再css中实现，不过需要再加一层 用的是div di
小技巧--table表格td内容垂直居中方法
泡椒猪肝的博客
11-19 1万+
小技巧–table表格td内容垂直居中方法 前端页面编写时，table表格排版时最容易遇到的，就是单元格内的内容无法居中，又不能写行高时，可以使用以下方法： table td { vertical-align: middle!important; } vertical-align 属性设置元素的垂直对齐方式。 !important 提升指定样式规则的应用优先权。 IE6及以下浏览器不兼容...
html table td 居中显示,table td怎么垂直居中显示 详解table中如何隐藏td?
weixin_30739835的博客
06-21 3536
在table中tr和td 有什么区别tabale就是表，tr其实就是table row也就是表中的行，td同理就是一个单元格。所以一个表中有多行，每个行里可以有多个单元格。 一个比较完整的表就是 Table控件 [1] 主要用于在web页面上创建表格，其功能与HtmlTable类似。html中的table标签中如何将几个合在一起的小编记得是记不起这个XXX是个需要准备的材料分别有：电脑、浏览器、h...
解决vue-print插件打印时表格宽度无法撑满自适应
ic_xcc的博客
07-16 10000
最近帮同事解决一个前端页面布局问题，技术背景vue+elementui，出现问题如下：点击详情表格布局一切正常（列数不固定，估计后端返回决定）点击打印之后的表格出现不能撑满，多出空白列的情况。 未点击打印时布局展示 经过各种调试主要解决由：tableLayout属性用来显示表格单元格、行、列的算法规则 ①auto：（默认值）列宽度由单元格内容设定； ②fixed: 列宽由表格宽度和列宽度设定； ③inherit：规定应该从父元素继承table-layout属性的值。 /设置表格...
html中table居中和表格内容居中的问题
热门推荐
ITzhongzi的博客
09-20 14万+
关于表格中的内容：： 在表格td中，有两个属性控制居中显示 align——表示左右居中——left，center，right valign——控制上下居中——left，center，right 这两个属性综合使用，就可以让单元格的内容上下左右都居中显示。 但是有的时候吧，会失效，那么在td中设置text-align为center也可。 td {...
css垂直居中和水平居中
最新发布
06-13
CSS中的垂直居中和水平居中是布局设计中的常见需求，尤其在响应式网页设计中。这里有几种常见的方法来实现元素的居中： 1. **Flexbox布局**： - 对于行内元素，使用 `align-items: center` 和 `justify-content: center` 可以使子元素在交叉轴（通常是垂直方向）和主轴（通常是水平方向）上居中。 ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. **Grid布局**： Grid布局也有类似的属性 `align-items` 和 `justify-items`，适用于更复杂的网格排列。 ```css .container { display: grid; align-items: center; justify-items: center; } ``` 3. **Positioning and Padding/Margins**： 使用绝对定位配合 `top`, `right`, `bottom`, `left` 属性，并设置外边距或内边距为 `auto`，对于静态定位的元素也能实现居中。 ```css .parent { position: relative; height: 100px; width: 100px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 4. **表格单元格（`<table>`）**： 如果是表格布局，`<td>` 元素的 `vertical-align: middle` 和 `text-align: center` 可以使其在行和列上居中。 5. **CSS Flexbox + translateY/jTranslateY**： 对于非块级元素，可以通过 JavaScript 或 CSS Custom Properties 设置其父元素的 `transform` 属性来实现居中。 ```css .parent { display: flex; justify-content: center; align-items: center; transform: translateY(-50%); } ``` **相关问题--:** 1. Flexbox和Grid布局分别适用于哪种场景？ 2. 绝对定位居中方式如何处理滚动内容？ 3. CSS表格单元格居中方式适用于哪些类型的HTML结构？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值