精华内容
下载资源
问答
  • header-cell-style设置头部居中;cell-style设置单元格内容居中 <el-table :data="tableData" style="width: 100%;" :height="bodyHeight - 172" :header-cell-style="{'text-align':'c...

    在这里插入图片描述

    这是让整个表格和内容居中的方式:header-cell-style设置头部居中;cell-style设置单元格内容居中

     <el-table
              :data="tableData"
              style="width: 100%;"
              :height="bodyHeight - 172"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
     >
    

    如果想让单个表格的内容居中:只需要在el-table-column上加上align=‘center’

     <el-table-column label="招聘人数" prop="require_num" min-width="150"  align='center'>
     </el-table-column>
    
    展开全文
  • 如何让Markdown 表格整体居中? 记录一个Markdown小技巧。 在Markdown中绘制表格时,可以使用:来设置表格内容的对齐方式。但是如何让整个表格都居中,使得文章整体更加美观呢? 方法如下: 在正在编辑的.md文件中...

    记录一个Markdown小技巧。
    在Markdown中绘制表格时,可以使用:来设置表格内容的对齐方式。但是如何让整个表格都居中,使得文章整体更加美观呢?
    方法如下:
    在正在编辑的.md文件中加入以下代码:

    <style>
    table
    {
        margin: auto;
    }
    </style>
    

    PS: 这个方法感觉有点野,大家若有更好的方法欢迎分享。

    展开全文
  • 页面有一表格,想实现如下功能: 当<td></td>中内容为 “办公” 时居中如何实现? 为其他内容时不变。
  • 如果只是loading元素在表格居中,那很容易,css就可以实现。但是可见区域内居中的话,loading就要fixed布局,这样loading的top值是动态变化的,下面看几张图片,就会一目了然了。loading在表格居中。这是在...

    这个问题的关键在于,loading在可见区域内居中。如果只是让loading元素在表格内居中,那很容易,css就可以实现。但是可见区域内居中的话,loading就要fixed布局,这样loading的top值是动态变化的,下面看几张图片,就会一目了然了。

    loading在表格内居中。

    99cfe241fa6db1a7bf1ea255aba3e0b4.png

    这是在表格内居中的loading,显而易见,当表格过长时,点击查询只能看到遮罩,而看不到loading。所以需要优化,优化的效果是在可视区内看到loading。

    loading在表格的可见区域内居中。当滚动的时候,也要保证loading实时居中。如下图所示:

    图一

    b0fcb84108ee3b054331bed597899d18.png

    图二

    4a7d09b2bd7e2428a8ccf159bfd8bb82.png

    图三

    e958e34434ac2db4adcad8cdb55cab7c.png

    从这三张图可以看出,loading的位置不是一直不变的,而是一直在表格的可视区域内居中的,

    怎么实现这种效果呢?

    这里用到javascript中的 getBoundingClientRect() 方法。

    Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

    <div class="table-wrap" id="table">        表格内容div>
    <script>    window.onload = function() {        let tableEle = document.getElementById("table");        let tableClientRect = tableEle.getBoundingClientRect();        console.log(tableClientRect);    }</script>// getBoundingClientRect()返回一个DOMRect对象。值如下:// DOMRect {x: 30, y: 160, width: 351.8374938964844, height: 2000, top: 160,bottom: 2160, left: 30,right: 381.8374938964844}

    getBoundingClientRect()  返回值有八个属性:left、top、right、bottom、x、y、width、height。

    left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。x、y表示元素左上角到页面上边和左边的距离。如图所示

    72e0a6550f5edac111b80fc4f540c24f.png

    用这个方法实现上面所说的在表格的可视区域内居中那就很简单了。

    大家可以试着自己实现一下。

    下面我贴出我的代码。

    <html lang="en"><head>    <meta charset="UTF-8">    <title>Documenttitle>    <style>        *{            margin: 0;            padding: 0;        }        .content-wrap{            width: 100%;            overflow-y: auto;        }        .search-wrap{            width: 30%;            height: 100px;            background: #417bff;            color: #fff;            text-align: center;            margin: 30px;        }        .table-wrap{            width: 30%;            height: 2000px;            background: #985ee4;            color: #fff;            text-align: center;            margin: 30px;            position: relative;        }        .loading-mark{            width: 100%;            height: 100%;            background: rgba(0,0,0,0.2);            position: absolute;            left:0;            top: 0;        }        /*相对于表格居中,当表格过长,loading可能看不见*/        /*.loading-text{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }*/        .loading-text{            position: fixed;            transform: translate(-50%,-50%);        }        .footer-wrap{            width: 30%;            height: 200px;            text-align: center;            background: #314B8C;            color: #fff;            margin: 30px;        }    style>head><body><div class="content-wrap" id="main">    <div class="search-wrap">查询区域div>    <div class="table-wrap" id="table">        表格内容        <div class="loading-mark">div>        <div class="loading-text" id="loading">loading...div>    div>    <div class="footer-wrap">        底部内容    div>div><script>    window.onload = function() {        let tableEle = document.getElementById("table");        let loadingEle = document.getElementById("loading");        let tableClientRect = tableEle.getBoundingClientRect();        let winH = document.documentElement.clientHeight;        document.getElementById("main").style.height = winH +'px';        //console.log(tableClientRect);        /*        * 用fiexd 布局,loading在表格可视范围内居中,left和top都需要计算。        * 初始进来页面时,也就是图一的状态        * */        loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';        loadingEle.style.left = tableClientRect.width/2 + tableClientRect.left + 'px';        /*        * 滚动页面时        * */        document.getElementById("main").addEventListener('scroll',function() {            tableClientRect = tableEle.getBoundingClientRect();            // 滚动的时候,图一状态的loading的top值            if (tableClientRect.top>0 && tableClientRect.bottom>winH) {                loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';            }            // 滚动的时候,图二状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom>winH) {                loadingEle.style.top = winH/2;            }            // 滚动的时候,图三状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom<winH) {                loadingEle.style.top =tableClientRect.bottom/2 + 'px';            }        });    }script>body>html>

    以上,只是一种情况,实际的项目场景中,刚进来的时候,表格还没有请求数据的时候,表格肯定是没有那么长的。那计算的方式也就不是上面图一的计算方式了。

    下面看图片,这样也很容易的知道,loading的top 应该是

    top = (tableClientRect.bottom - tableClientRect.top)/2 + tableClientRect.top;

    9427b1f262d57342859f0a633c46d8e0.png

    还有可能的情况是:进来页面的时候,表格没在可视区,这种情况也是要做处理的,否则可能在点击查询的时候没有看到表格却看到了loading。

    c791153e474a62453ac7e9a8edbba25b.png

    以上的这些情况,有兴趣的可以自己完整的实现一下。或者有不同做法的,欢迎评论区留言,一起讨论。

    展开全文
  • -- 如何让 Html的表格中单元格的内容居中显示 --> ; height: 21px;" valign="middle"> 1 ; height: 21px;" valign="middle"> 2 ; height: 21px;" valign="middle"> 10 </html>
    <!-- 如何让 Html的表格中单元格的内容居中显示  -->
    <html>
    <body>
    <table border="1">
    <tr>
    <td align="center" style="width:120px; height: 21px;" valign="middle">
    1
    </td>
    <td align="center" style="width:120px; height: 21px;" valign="middle">
    2
    </td>
    <td align="center" style="width:120px; height: 21px;" valign="middle">
    10
    </td>
    </tr>
    </table>
    </body>
    </html>
    展开全文
  • 首先我们先来看看table表格内容居中的使用:我们先给大家介绍个属性,它就是align属性。align 属性规定表格相对于周围元素的对齐方式。通常来说,HTML表格的前后都会出现折行。通过运用align属性,可实...
  • 首先我们先来看看table表格内容居中的使用: 我们先给大家介绍个属性,它就是align属性。 align 属性规定表格相对于周围元素的对齐方式。 通常来说,HTML表格的前后都会出现折行。通过运用align属性,可实现
  • 首先我们先来看看table表格内容居中的使用:我们先给大家介绍个属性,它就是align属性。align 属性规定表格相对于周围元素的对齐方式。通常来说,HTML表格的前后都会出现折行。通过运用align属性,可实...
  • 首先我们先来看看table表格内容居中的使用:我们先给大家介绍个属性,它就是align属性。align 属性规定表格相对于周围元素的对齐方式。通常来说,HTML表格的前后都会出现折行。通过运用align属性,可实...
  • 如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示。 ~~~newcommand{tabincell}[2]{begin{tabular}{@{}#1@{}}#2end{tabular}}%放在导言区%然后使用 tabincell{c}{} 就可以在...
  • 首先我们先来看看table表格内容居中的使用:我们先给大家介绍个属性,它就是align属性。align 属性规定表格相对于周围元素的对齐方式。通常来说,HTML表格的前后都会出现折行。通过运用align属性,可实...
  • 程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)​zhuanlan.zhihu.com首先我们先来看看table表格内容居中的使用:我们先给大家介绍个属性,...
  • 虽然Div布局已经基本上取代了... 要div中的内容垂直居中,无非有以下几种方法,等我一一列举:一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要文字的行高和容器的高度...
  • 虽然Div布局已经基本上取代了... 要div中的内容垂直居中,无非有以下几种方法,等我一一列举:一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要文字的行高和容器的高度...
  • 如何让div中的内容垂直居中 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出...
  • 虽然Div布局已经基本上取代了表格... 要div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要文字的行高和容...
  • 关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:1、文本,图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto3、不定宽块状元素...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 244
精华内容 97
关键字:

如何让表格内容居中