精华内容
下载资源
问答
  • 自适应table

    2015-02-12 14:53:06
    在手机竖屏和PAD端表格显示的自适应处理,摘自《高性能HTML5》  复制粘贴就可以看效果哦。d   <!DOCTYPE HTML> <html> <head> <title> 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响应式表格特效。
  • 尤其自适应三栏布局应用非常广泛,通常有两列是...效果图水平分栏有多种实现方式,最简单直观的是基于table的实现,这便是本文主要讨论的内容。先看我们要实现的效果图:HTML框架是最古老的HTML标签之一,从IE4、C...

    因为HTML流式布局的特性,水平分栏与垂直对齐的实现都不是那么的直观。尤其自适应三栏布局应用非常广泛,通常有两列是固定宽度的,另外一列根据屏幕大小自适应宽度(比如百度音乐、百度云等)。自适应三栏布局可以说是前端工程师面试的必选题目。

    效果图

    水平分栏有多种实现方式,最简单直观的是基于table的实现,这便是本文主要讨论的内容。先看我们要实现的效果图:

    HTML框架

    Left contentCenter content

    首先声明一个

    。而这三列才是我们想要的内容,分别为左边栏、中间部分、右边栏。

    CSS

    接着稍微来点CSS,让我们能够看得更清楚:

    table{

    height: 350px;

    margin: 10px;

    border: 1px solid grey;

    }

    #center {

    width: 100%;

    }

    #left, #right {

    min-width: 200px;

    background-color: lightyellow;

    }

    这样便达到了截图中的效果。Table自适应布局的关键在于自适应的那一栏宽度应当设置为100%,固定宽度的两栏应设置min-width(注意不是width!)。

    Div模拟Table

    看官想必已经发现了,我们要显示的只是三栏内容,却添加了很多语义并不直观的

    等元素。我们完全可以通过没有语义的
    来简化HTML:
    Left content
    Center content
    Right content

    我们只需要设置三栏的display属性为table-cell:

    .table-layout div{

    display: table-cell;

    }

    .table-layout{

    height: 350px;

    margin: 10px;

    border: 1px solid grey;

    }

    这时#left和#right(黄色部分)并没有充满整个父容器.table-layout,如下图:

    这是因为如果一个元素被设置为table-cell,浏览器会在渲染时给它外层包装一个table-row以及table。但这个table是嵌入在div.table-layout里面的,并未充满整个div.table-layout的高度。我们只需要将div.table-layout设置为table,浏览器便不会包装那个table了:

    .table-layout{

    display: table;

    }

    至此已经达到了和

    优缺点

    Table布局的优点就是实现简单,还可以通过Table嵌套来实现复杂的布局。但Table的问题也很显著:布局死板。Table是非常可靠的布局方式,一个

    永远不会与另一个有交错和遮挡。

    冗余的HTML。随着HTML和CSS相关规范的演进,我们倾向于认为样式应当由CSS来处理,而HTML应当尽量保持有语义。

    大表格的性能问题。我们知道HTML是流式布局的,后面的元素理论上讲不会影响前面元素的渲染,然而Table中后续行的列宽将会引起前面行的回流和重绘。

    因此推荐本文只供学习和面试用。

    欢迎关注天码营微信公众号: TMY-EDU

    小编重点推荐:天码营网站

    展开全文
  • 在简书上看的文章,上面用swift写的自适应,模仿写了OC的tableview自适应,省去了繁琐的对控件计算大小。
  • Css让文字自适应Table宽度[转] .ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px} 关键样式: table-layout:fixed 固定布局的算法,则表格被呈递的默认...

    Css让文字自适应Table宽度[转]

    .ctl{

    table-layout:fixed

    }

    .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}

    关键样式:

    table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)

    text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)

    overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla) 

    white-space: nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

    原文

    http://www.feitec.com/showart.asp?id=825

    展开全文
  • display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float,position:absolute,所以,在使用display:table-cell与...

    display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。

    与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不要一起使用。

    设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。

    在简单介绍了table-cell之后,来看看如何利用它实现两栏自适应布局

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a

    odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!

    Possimus ratione sed molestiae labore error cum!

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a

    odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!

    Possimus ratione sed molestiae labore error cum!

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a

    odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!

    Possimus ratione sed molestiae labore error cum!

    .box {

    width: 60%;

    margin: 60px auto 0;

    padding: 20px;

    background-color: #dddddd;

    &::after {

    content: "";

    display: table;

    clear: both;

    }

    .img-wrapper {

    float: left;

    margin-right: 10px;

    line-height: 0;

    }

    .content {

    display: table-cell;

    }

    }

    效果图

    本例中,左侧为头像,右侧内容自适应。其中头像部分使用了float属性,左浮动,IE8+以及Firefox、Chrome、Opera等现代浏览器右侧使用了display:table-cell属性,结果就自适应了,很简单的代码,很神奇的效果。

    参考:张鑫旭

    https://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

    展开全文
  • <body> <div style="display:table;border:1px red solid;width:100%;"> <div style="display:table-caption;text-align:center;">My...
  • while(columns.hasMoreElements()){ TableColumn column = (TableColumn)columns.nextElement(); int col = header.getColumnModel().getColumnIndex(column.getIdentifier()); int width = (int)myTable....
  • while(columns.hasMoreElements()){ TableColumn column = (TableColumn)columns.nextElement(); int col = header.getColumnModel().getColumnIndex(column.getIdentifier()); int width = (int)myTable....
  • //获取表格 Table table = section.getTables().get(0); //设置表格列宽适应内容 table.autoFit(AutoFitBehaviorType.Auto_Fit_To_Contents); //设置表格列宽适应窗体 //table.autoFit(AutoFitBehaviorType.Auto_...
  • 有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤...
  • 来源:cnblogs.com/lijizhiHashMap、...扩容取值扩容期间会创建新的table在数据转储期间,可能会有取到null的可能;碰撞丢失多线程情况下,若同时对一个bucket 进行put操作可能会出现覆盖情况;可见性问题...
  • // HashEntry 对象组成的数组,真正存放数据的桶// table 数组的数组成员代表散列映射表的一个桶// 如要访问table里面的数据,则需先访问到该segmenttransient volatile HashEntry[] table;// 在该 ...
  • HTML,使用div+css实现自适应table布局

    万次阅读 2016-07-30 18:16:26
    简单的table布局:  1:使用 box-sizing以便于使用100%;  2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度  3:使用margin,padding,保证一个单元格拥有最小高度。避免空的单元格。...
  • 红黑树(链表长度>8时自动转换为红黑树) 初始化hashMap时若未指定容量,则默认为16,即table的容量为16,扩容resize指的是扩大table的容量,扩容后的容量 = 原容量 * 2 扩容resize()的源码如下: resize()方法如此长...
  • 自适应的自旋锁 自适应自旋锁的出现使得自旋操作变得聪明起来,不再跟之前一样死板。所谓的“自适应”意味着对于同一个锁对象,线程的自旋时间是根据上一个持有该锁的线程的自旋时间以及状态来确定的。例如对于A锁...
  • 在我的程序里,我用下面的代码自适应列宽:private int getPreferredWidthForColumn(TableColumn col) {int hw = columnHeaderWidth(col); // hw = header widthint cw = widestCellInColumn(col); // cw = column ...
  • 如果table为空或者长度为0,即没有元素,那么使用resize()方法扩容if ((tab = table) == null || (n = tab.length) == 0) n = (tab = resize()).length;// 2.计算插入存储的数组索引i,此处计算方法...
  • 自适应意味着自旋的时间(次数)不再固定,而是由前一次在同一个锁上的自旋时间及锁的拥有者的状态来决定。如果在同一个锁对象上,自旋等待刚刚成功获得过锁,并且持有锁的线程正在运行中,那么虚拟机就会认为这次...
  • 这是一个table布局,左边三个小div写死宽度,右边两个按钮根据内容自适应。那么来看看是如何实现的吧。代码如下: <!DOCTYPE html> <title>demo , initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ...
  • import javax.swing.table.DefaultTableModel; import javax.swing.table.TableColumnModel; public class TestJTable { static void init() { fraFrame = new JFrame(); fraFrame.setDefaultCloseOperation...
  • table自适应

    万次阅读 2018-06-15 16:39:37
    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自适应高度 table { table-layout: fixed; width: 100%; }...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,466
精华内容 586
关键字:

自適應table