精华内容
下载资源
问答
  • 自适应Table表格样式代码是一款div css3响应式表格特效。
  • <body> <div style="display:table;border:1px red solid;width:100%;"> <div style="display:table-caption;text-align:center;">My...

    <body>
    <div style="display:table;border:1px red solid;width:100%;">
    <div style="display:table-caption;text-align:center;">My table</div>
    <div style="display:table-row;">
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
    </div>
    <div style="display:table-row;">
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
    </div>
    <div style="display:table-row;">
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
    <div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
    </div>
    <div style="display:table-row;">
    <div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">1</div>
    <div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">2</div>
    <div style="display:table-cell;border-bottom:0px red solid;border-right:0px red solid;">3</div>
    </div>
    </div>
    </body>

    </html>


    转载于:https://my.oschina.net/fengxh/blog/530089

    展开全文
  • 自适应Table表格样式代码是一款div css3响应式表格特效。
  • 自适应table

    2015-02-12 14:53:06
    在手机竖屏和PAD端表格显示的自适应处理,摘自《高性能HTML5》  复制粘贴就可以看效果哦。d   &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New ...

        在手机竖屏和PAD端表格显示的自适应处理,摘自《高性能HTML5》

        复制粘贴就可以看效果哦。d

        

    <!DOCTYPE HTML>
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <style type="text/css">
     .table ul,.table li{
      padding:0;
      margin:0;
      list-style:none;
     }
     .table{
      display:table;
     }
     .tr{
      display:table-row;
     }
     .td{
      display:table-cell;
     }
     .table,.tr,.td{
      border:1px solid #ccc;
      border-collapse:collapse;
     }
     .tableTreatment1{
      width:800px;
      -webkit-box-shadow:2px 2px 2px #999999;
      -moz-box-shadow:2px 2px 2px #999999;
      box-shadow:2px 2px 2px #999999;
     }
     .tableTreatment1 .first{
      background:#c8dfff;
      font-weight:bold;
     }
     .tableTreatment2{
      width:320px;
     }
     .tableTreatment2 .table,.tableTreatment2 .tr,.tableTreatment2 .td{
      border:none;
     }
     .tableTreatment2 .tableHead{
      display:none;
     }
     .tableTreatment2 .tr{
      width:200px;
     }
     .tableTreatment2 .td{
      display:block;
      float:none;
      padding:5px;
     }
     .tableTreatment2 .td:first-child{
      color:white;
      font-weight:bold;
      text-shadow:0 0 3px #333;
      background:#aebcbf;
     }
     .tableTreatment2 .td:before{
      content:attr(data-colhead)":";
      font-weight:bold;
      color:#777;
     }
    
     .tableTreatment2 .td:first-child:before{
      content:"";
     }
    
     @media only screen and (max-width:767px){
      .tableTreatment1{
       width:320px;
      }
      .tableTreatment1 .table,.tableTreatment1 .tr,.tableTreatment1 .td{
       border:none;
      }
      .tableTreatment1 .tableHead{
       display:none;
      }
      .tableTreatment1 .tr{
       width:200px;
      }
      .tableTreatment1 .td{
       display:block;
       float:none;
       padding:5px;
      }
    
      .tableTreatment1 .td:first-child{
          color:white;
       font-weight:bold;
       text-shadow:0 0 3px #333;
       background:#aebcbf;
      }
    
      .tableTreatment1 .td:before{
       content:attr(data-colhead) ": ";
       font-weight:bold;
       color:#777;
      }
    
      .tableTreatment1 .td:first-child:before{
       content:"";
      }
     }
      </style>
     </head>
    
     <body>
      <div class="table tableTreatment1">
     <ul class="tr tableHead">
        <li class="td" data-colhead=""></li>
        <li class="td" data-colhead="The Head">
      The head
        </li>
        <li class="td" data-colhead="B">
      B
        </li>
        <li class="td" data-colhead="C">
      C
        </li>
        <li class="td" data-colhead="D">
      D
        </li>
        <li class="td" data-colhead="E">
      E
        </li>
     </ul>
     <ul class="tr tableBody">
        <li class="td first" data-colhead="">
      0000
        </li>
        <li class="td" data-colhead="The Head">
      The head  a
        </li>
        <li class="td" data-colhead="B">
      BBBBBBB
        </li>
        <li class="td" data-colhead="C">
      CCCCCCC
        </li>
        <li class="td" data-colhead="D">
      DDDDDDD
        </li>
        <li class="td" data-colhead="E">
      EEEEEEE
        </li>
    
     </ul>
     <ul class="tr tableBody">
        <li class="td first" data-colhead="">
      111111
        </li>
        <li class="td" data-colhead="The Head">
      The head  a
        </li>
        <li class="td" data-colhead="B">
      BBBBBBB
        </li>
        <li class="td" data-colhead="C">
      CCCCCCC
        </li>
        <li class="td" data-colhead="D">
      DDDDDDD
        </li>
        <li class="td" data-colhead="E">
      EEEEEEE
        </li>
    
     </ul>
     <ul class="tr tableBody">
        <li class="td first" data-colhead="">
      22222
        </li>
        <li class="td" data-colhead="The Head">
      The head  a
        </li>
        <li class="td" data-colhead="B">
      BBBBBBB
        </li>
        <li class="td" data-colhead="C">
      CCCCCCC
        </li>
        <li class="td" data-colhead="D">
      DDDDDDD
        </li>
        <li class="td" data-colhead="E">
      EEEEEEE
        </li>
    
     </ul>
      </div>
     </body>
    </html>
    

     

    展开全文
  • 自适应Table表格样式代码是一款div css3响应式表格特效。
  • 在简书上看的文章,上面用swift写的自适应,模仿写了OC的tableview自适应,省去了繁琐的对控件计算大小。
  • basictable插件是一款jQuery自适应浏览器宽度响应式表格插件,可以设置breakpoint来定制自己的响应式断点,该表格能适应台式电脑,平板和手机的需求,响应式效果非常好,现在网站很多都有多平台版本了,这个效果非常...
  • HTML,使用div+css实现自适应table布局

    万次阅读 2016-07-30 18:16:26
    简单的table布局:  1:使用 box-sizing以便于使用100%;  2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度  3:使用margin,padding,保证一个单元格拥有最小高度。避免空的单元格。...

    简单的table布局:

        1:使用 box-sizing以便于使用100%;

        2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度

       3:使用margin,padding,保证一个单元格拥有最小高度。避免空的单元格。


    <html>
    <head></head>
    <style type="text/css">
    div.table{  
        border:1px solid #000000;  
        margin-left:-1px;  
        border-bottom-width:0;  
        border-left-width:0;  
        text-align:left;  
        line-height:40px;  
        
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */ 
    }  
      
    .clear0{  
        clear:both;  
        height:0px;  
    }  
    div.table .row{  
        clear:both;  
        overflow:hidden;  
        width:100%;
        border-bottom:1px solid #000000;
    }  
    .rowbak{  
    }  
    div.table .srow{/*没有cell的一行*/  
        overflow:visible; 
        width:100%;
        border-bottom:1px solid #000000;  
        border-left:1px solid #000000;  
    }  
    div.table .cell{  
        border-left:1px solid #000000;  
        float:left;
        margin-bottom:-1000px;  
        padding-bottom:1000px;  
    }  
    div.table .cellEnd{  
        clear:both;  
        width:0;  
    }  
    div.table .rowbak .cell{  
        background-color:#ededed;
    }  
    .w200 {
       width:200px;
    }
    </style>
    <body>
    <div class="table" style="line-height:28px;">  
          <div class="row">  
                        <div class="cell w200">时间</div>  
                        <div class="cell w200"><div style="font-size:10px;">来源/回发:项目,个人,服务</div></div>  
                        <div class="cell" style="width:499px">摘要</div>  
                        <div class="cell" style="width:198px;">操作【岗位】</div>  
                        <div class="cellEnd"></div>  
                    </div>  
                    <div class="row rowbak">  
                        <div class="cell w200">2016/06/30 15:01</div>  
                        <div class="cell w200"><div style="font-size:10px;">我的家庭协作</div></div>  
                        <div class="cell" style="width:499px">XXXXXXXXXXXXXXXXthis is Hello world</div>  
                        <div class="cell" style="width:198px;font-size:12px;line-height:none;">岗位1: 操作1 操作2 操作3 操作4<br />岗位2: 操作1 操作2 操作3 操作4</div>  
                        <div class="cellEnd"></div>  
                    </div>  
      
    </div>  
    </body>
    </html>


    展开全文
  • 有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤...

    有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。

    一、js文件里加入如下代码

    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });

    二、样式文件里加入如下代码

    .table-responsive>.fixed-column {
        position: absolute;
        display: inline-block;
        width: auto;
        border-right: 1px solid #ddd;
    }
    @media(min-width:768px) {
        .table-responsive>.fixed-column {
            display: none;
        }
    }
    大功告成,打开手机浏览器,查看效果。
    展开全文
  • <div class=table-responsive"> <table class="table"> <thead> <tr> <th> ... </th> .... </tr&g...
  • WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定...
  • table宽度自适应

    千次阅读 2018-07-16 22:11:42
    上代码 td{ padding: 0 20px;//根据情况自己设置 white-space: nowrap;//不换行 } 试用前 使用后
  • 3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码: <el data=...
  • flex布局下Table组件宽度自适应

    千次阅读 2019-07-04 16:36:57
    ps: 如果Table的上一级元素是flex布局,就设置上一级元素overflow属性,如果上一级元素的上一级元素也是flex布局,继续设置overflow属性,直到出现不再是flex布局为止 方案二 1.在Table父级元素添加样式 ...
  • bootstrap table 怎么自适应宽度

    万次阅读 2018-06-02 21:13:48
    本文参考此文章https://segmentfault.com/q/1010000009900107表格字段非常多, 表格到页面宽度100%都...div class=table-responsive"&gt; &lt;table class="table text-nowrap"&gt; ...
  • table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px} 关键样式: table-layout:fixed固定布局的算法,则表格被呈递的默认宽度为100% (For IE,Mozilla) ...
  • table自适应大小,以及内容换行

    千次阅读 2019-01-30 15:19:00
    table的样式中加入以下两个样式:  table-layout: fixed;  word-wrap:break-word; 转载于:https://www.cnblogs.com/OraCursor/p/10338263.html
  • element table 列宽根据内容自适应

    千次阅读 2020-04-22 12:02:34
    我上一篇发布如何优化官网写的table表格的写法,但是他的列宽不能自适应,于是我觉得官网会增加某个属性控制列宽 我试了 直接加 fit 或者 :fit="true"都不好使,我看到网上有些人去动态计算内容的宽度,但是效果...
  • input输入框在table中的自适应记录笔记 例如: <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
  • 在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
  • --<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script> --> <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/...
  • 基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
  • tableHeight : 400 } } 给table应用变量 <div id="top">表格上方的其他布局</div> <el-table :height="tableHei" > </el-table> 计算获取最新高度并改变高度变量 用 窗口高度...
  • 这是一个table布局,左边三个小div写死宽度,右边两个按钮根据内容自适应。那么来看看是如何实现的吧。代码如下: <!DOCTYPE html> <title>demo , initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ...
  • table设置为手机端自适应

    千次阅读 2020-07-10 21:53:30
    table设置为手机端自适应 PC端样式为 index.html中的控制代码 <div class="table-responsive"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <thead><...
  • table自适应

    万次阅读 2018-06-15 16:39:37
    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自适应高度 table { table-layout: fixed; width: 100%; }...
  • table>没有设置,那么网页缩放的时候就会出现以下情况。 解决办法: <table style="width:100%;table-layout:fixed;" class="Table1" runat="server"> <tr> <td style="width:15%;word-...
  • table方法实现图片自适应及脚本方法

    千次阅读 2017-02-24 23:27:17
    这种代码网上有很多,就不多详细的解释了,另外的话,还有一种用table表的方法去让图片自适应,感觉效果很神奇,所以自己摸索了一番,废话不多说,上代码!!!!  那么我们先来一睹为快要实现的布局样式!!! ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,144
精华内容 16,057
关键字:

自適應table