精华内容
下载资源
问答
  • 如果只是让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

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

    展开全文
  • 正在做课设顺便学习前端,遇到了一个很简单但是每次都会搞很久的问题———如何让一个表格显示页面中间。  解决方法: 将包裹table的div设置属性 {display:inlineblock;},最外层div设置{text-align:center;}...

        正在做课设顺便学习前端,遇到了一个很简单但是每次都会搞很久的问题———如何让一个表格显示在页面中间。

        解决方法:<div><div><table></table></div></div>  将包裹table的div设置属性 {display:inlineblock;},在最外层div设置{text-align:center;}

        其实和网上很多说法是一致的方法,但是这里要注意的是如果去掉内层div而直接给table设置inlineblock的话无法达到效果。

     


    展开全文
  • 一个表格内嵌套另一个表格时,如何居中? 假设大表格为: <table id="tableRow"> <tr> <th>City</th> <th>Date</th> <th>Temperature</th> <th...

    在一个表格内嵌套另一个表格时,如何居中?

    假设大表格为:

    <table id="tableRow">
      <tr>
        <th>City</th>
        <th>Date</th>
        <th>Temperature</th>
        <th>Altitude</th>
        <th>Population</th>
        <th>Diner Rating</th>
      </tr>
      <tr>
        <td>Walla Walla, WA</td>
        <td class="center">June 15th</td>
        <td class="center">75</td>
        <td>1,204 ft</td>
        <td>29,686</td>
        <td class="center">4/5</td>
      </tr>
      <tr class="cellcolor">
        <td>Magic City, ID</td>
        <td class="center">June 25th</td>
        <td class="center">74</td>
        <td class="">5,312 ft</td>
        <td>50</td>
        <td class="center">3/5</td>
      </tr>
      <tr>
        <td>Bountiful, UT</td>
        <td class="center"> July 10th</td>
        <td class="center">91</td>
        <td>4,226 ft</td>
        <td>41,173</td>
        <td class="center">4/5</td>
      </tr>
      <tr class="cellcolor">
        <td>Last Chance, CO</td>
        <td class="center">July 23rd</td>
        <td class="center">102</td>
        <td>4,780 ft</td>
        <td>265</td>
        <td class="center">3/5</td>
      </tr>
      <tr>
        <td rowspan="2">Truth or Consequences, NM</td>
        <td class="center">August 9th</td>
        <td class="center">93</td>
        <td rowspan="2">4,242 ft</td>
        <td rowspan="2">7,289</td>
        <td class="center">5/5</td>
      </tr>
      <tr>
        <td class="center">August 27th</td>
        <td class="center">98</td>
        <td class="center">
          <table>
            <tr>
              <th>Tess</th>
              <td>5/5</td>
            </tr>
            <tr>
              <th>Tony</th>
              <td>4/5</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="cellcolor">
        <td>Why, AZ</td>
        <td class="center">August 18th</td>
        <td class="center">104</td>
        <td>860 ft</td>
        <td>480</td>
        <td class="center">3/5</td>
      </tr>
    </table>

    小表格为:

          <table>
            <tr>
              <th>Tess</th>
              <td>5/5</td>
            </tr>
            <tr>
              <th>Tony</th>
              <td>4/5</td>
            </tr>
          </table>

    使其居中的CSS为:

    table table
    {
      margin-left:      20px;
      margin-right:     20px;
    }

    效果:

    综上,在一个表格内嵌套另一个表格时,居中的一种方法为设置小表格的外边距。

    转载于:https://www.cnblogs.com/isAndyWu/p/11462938.html

    展开全文
  • 如何将Word表格内的文字居中对齐

    千次阅读 2014-09-29 09:25:38
    直接选中表格内的文字,这时菜单栏会出现“表格工具--布局”选项卡,从对齐方式中选择一种,这里我们选择中间的“居中对齐”。 方法二 选中文字之后,我们也可以直接开始选项卡中,单击段落组里
    Word中的文字居中对齐,相信很多人都会,但是要你把Word表格里面的文字也进行居中对齐,就不见得人人都会了。Word联盟收集了一些方法,下面,就把各种方法跟大家介绍一下。

    方法一

    直接选中表格内的文字,这时菜单栏会出现“表格工具--布局”选项卡,从对齐方式中选择一种,这里我们选择中间的“居中对齐”。

    将Word表格内的文字居中对齐的几种方法

    方法二

    选中文字之后,我们也可以直接在开始选项卡中,单击段落组里面的对齐按钮,不过只有5种对齐方式。

    将Word表格内的文字居中对齐的几种方法

    方法三

    鼠标左键按住不放,选中文字,右击,在右键菜单中选择单元格对齐方式,然后在从9种方式中选择居中对齐。

    将Word表格内的文字居中对齐的几种方法

    也不一定是按照上述介绍的三种方法就一定能成功的,有些朋友就向我反映,说是无效。对于这种情况,请按照下面的步骤进行操作:

    ①选中文字所在的单元格,点击开始菜单--段落组里面的小按钮,如下图红色标记处。

    将Word表格内的文字居中对齐的几种方法

    ②弹出段落界面,在缩进和间距选项卡中,间距设置为段前段后0行,间距单倍行距,这样就能解决问题了。

    将Word表格内的文字居中对齐的几种方法




    展开全文
  • 即可实现表格内文字居中。css表格中的文字是如何居中的:开始我们先介绍个属性,就是这个属性才能使表格css样式中居中起来。text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,...
  • ~~~newcommand{tabincell}[2]{begin{tabular}{@{}#1@{}}#2end{tabular}}%放在导言区%然后使用 tabincell{c}{} 就可以在表格中自动换行%比如这么用begin{tabular}{|c|c|}hline1 & the first...
  • excel表格内文字居中输入的设置方法1、首先excel表格中做一个表格。2、发现此标题栏字体不是正中间位置,怎么设置呢?选择此表格,右键-设置单元格格式。3、调出单元格格式对话框。4、点击对齐...
  • 行内元素水平居中利用 text-align: center 可以实现块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。.parent{ text-align:...
  • 手记1一、数据表格中按钮切换(置顶与取消)layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶{{#if(d.order>0){}}取消{{#}}}注意:属性lay-event=""是模板的关键所在,值可随意定义使用...
  • 本文主要针对需要全屏显示的系统页面,因为系统经常会用到表格table布局,偶尔的table需要显示div的正中间,所以鄙人特此总结下divtable的万千姿态。 <!DOCTYPE html><html> <head><...
  • 如图,想实现 表格内上下居中 文字满了后也自动在表格内居中。 ![图片说明](https://img-ask.csdn.net/upload/201611/30/1480508058_675894.jpg) 图片效果目前错位,代码如下: ``` <!doctype html> ...
  • 在使图片完全居中于框,采用div 里的padding margin ...在div里加一个table的表格,用表格的属性是在表格里的图片实现居中。 其中 [color=red]align[/color] 是水平对齐方式。[color=red]valign[/color] 是水平对...
  • 相邻的2个块标签,会发生外边距合并 ,合并之后以边距大的为准 如: 20和50最后显示50 防止兄弟标签之间的外边距合并,可以标签之间加非空字符 块标签, 父子标签外边距也会发生合并 如何防止父子外边距合并: (1) ...
  • 手记1一、数据表格中按钮切换(置顶与取消)layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶{{#if(d.order>0){}}取消{{#}}}注意:属性lay-event=""是模板的关键所在,值可随意定义使用...
  • 参考必应主页的样式,页面中放置一个表格,100%宽高,然后表格内部是一个单元格,单元格内部放置div,使其margin为auto即可。 <table style="height: 100%; width: 100%"> <tr> <td&...
  • 一个div,动态添加一段文字,如何设置为不管内容多少都以 上下垂直居中 的形式展现?方法:利用displaytable-cell属性,将div元素转化为表格的形式显示出来;然后再设置 vertical-align:middle 属性。需要注意的...
  • layUI数据表格中是可以使用toolbar设置表格内的按钮 1、使用laytel语法 注意:属性 lay-event="" 是模板的关键所在,值可随意定义 使用laytpl循环判断语句来实现。 2.laytpl语句某些时候会和php有...
  • 新建表格之后,单击其中一个单元格是选中,双击则是进入编辑模式,可以输入数据或者文字;选中单元格后,右键选择【设置单元格格式】可以设置【边框】;选中单元格如果选择【合并后居中】可以合并单元格;选中单元格...
  • 第一步:插入表格 在公式所在行居中插入一行三列的表格,具体操作为: a.设置行居中,快捷键Ctrl+E; b.插入->表格->3×1的表格; 2 ...a.在表格第一列单元格右键...
  • 新建表格之后,单击其中一个单元格是选中,双击则是进入编辑模式,可以输入数据或者文字;选中单元格后,右键选择【设置单元格格式】可以设置【边框】;选中单元格如果选择【合并后居中】可以合并单元格;选中单元格...
  • 毕设论文word撰写:如何实现公式居中,编号右对齐?其实非常简单! 又是一年毕业季,很多小伙伴撰写毕业论文的时候可能会遇到公式编辑的问题:怎么实现公式居中,编号右对齐呢?目前网上的方法主要有两种:表格法...
  • Latex 表格单元格换行

    万次阅读 2010-04-06 08:52:00
    Latex 表格单元格换行问题:如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示答:(来源于smth)方案一:/newcommand{/tabincell}[2]{/begin{tabular}{@{}#1@{}}#2/end{...
  • PPT中表格非常常见,尤其是一些数据汇报类PPT,表格...原稿如下:我们先分析原稿存在的问题,大概有以下5点:1、表格内的文本偏上了,没有上下居中;2、表格的高不一致,有些表格跨了两行;3、表格第一行表头与标...
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学...
  • 如果做好表格?同样的工作效率与工作成果,但是不一样的表格给老板呈现的视觉效果,可能远远比表格中的数据更重要。...表格内的数据一般以左对齐为主,但是表头内容都是进行合并居中。如果表格内文字数据由于...
  • Excel制作表格中,文字单元格对齐的方式,我们经常用到的有居中对齐、居右对齐、居左对齐,对过这些对齐方式,可以编辑出更易阅读和美观的表格,今天小编再分享6种关于文字对齐的技巧,也是工作中常用的,方便小...
  • 判断某个月份是否给定的月份区间输入输出新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...

空空如也

空空如也

1 2 3 4 5 6
收藏数 111
精华内容 44
关键字:

如何在表格内居中