<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

.box{

width:200px;

height: 200px;

border:1px solid red;

overflow:auto;

}

.testTable-cell{

display:table-cell;

border:1px solid red;

padding:10px;

vertical-align:middle;

width:3000px;

}

.testTable-cell div{

display:inline-block;

}

.first{

width:100px;

}

.one{

width: 100px;

background: red;

}

.two{

width: 200px;

background: blue;

}

.three{

width:300px;

background: orange;

}

</style>

</head>

<body>

<!-- overflow scoll 只要设置就会出现滚动条

而设置auto只有内容超出父元素才会出现滚动条

-->

<!-- 研究display:table-cell -->

<!-- 设置之后 会默认的创建一个tr table 来包裹它

为了让它成为真正的td

所以它这样设置完以后具有td的特性

等高 自适应宽度

可以利用vertical-align:middle 实现垂直居中

还可以实现

左定宽 右自适应宽度

但是 右边的父元素宽度要设置一个大值 为了当子元素

宽度太大 也会自适应

-->

<div class="box">

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

</div>

<div class="testTable-cell first">

帅哥帅哥帅哥帅哥帅哥<br>

帅哥帅哥帅哥帅哥帅哥<br>

帅哥帅哥帅哥帅哥帅哥<br>

帅哥帅哥帅哥帅哥帅哥<br>

</div>

<div class="testTable-cell">

<div class="one">one</div>

<div class="two">two</div>

<div class="three">three</div>

<div class="one">one</div>

<div class="two">two</div>

<div class="three">three</div>

<div class="one">one</div>

<div class="two">two</div>

<div class="three">three</div>

<div class="one">one</div>

<div class="two">two</div>

<div class="three">three</div>

</div>

<script>

</script>

</body>

</html>

研究table-cell和overflow的更多相关文章

  1. IText 生成pdf，处理table cell列跨页缺失的问题

    /**     * 创建(table)PDF,处理cell 跨页处理     * @param savePath(需要保存的pdf路径)     * @param pmbs (数据库查询的数据)    ...

  2. [转]AngularJS fixed header scrollable table directive

    本文转自:http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive This ...

  3. js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  4. DIV做的Table

    <style> div.table{ border:1px solid #d7d7d7; margin-left:0px; border-bottom-width:; width:1200 ...

  5. Guava学习笔记：Guava新集合-Table等

    Table 当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava ...

  6. 创建一个Table View

    在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...

  7. iphone dev 入门实例1:Use Storyboards to Build Table View

    http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/ Creating Navig ...

  8. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  9. 从零开始学ios开发（十二）：Table Views（中）UITableViewCell定制

    我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...

  10. 从零开始学ios开发（十二）：Table Views（上）

    这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...

随机推荐

  1. 论文中“but”与“however”的区别

  2. Linux - Port 端口检测方式

    ss 和 netstat 区别 netstat是遍历/proc下面每个PID目录: ss直接读/proc/net下面的统计信息. 所以ss执行的时候消耗资源以及消耗的时间都比netstat少很多 ne ...

  3. CF734F Anton and School (构造)

    \(solution\) : 这道题做法很巧妙,需要对位运算有足够了解: $( a $ & $ b )$ \(+\) $( a $ | $ b )$ \(=\) \(a+b\) ,所以有 \( ...

  4. 一主多从+Binlog Server，主库故障无法访问，如何在从库中选举一个新主库

    一.基本环境 VMware10.0+CentOS6.9+MySQL5.7.19 ROLE HOSTNAME BASEDIR DATADIR IP PORT M ZST1 /usr/local/mysq ...

  5. 记关于webpack4下css提取打包去重复的那些事

    注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试 经过2天的填坑,现在终于有点成果 环境webpack4.6 + html-webpack-pl ...

  6. 扩展欧几里得（E - The Balance POJ - 2142 ）

    题目链接:https://cn.vjudge.net/contest/276376#problem/E 题目大意:给你n,m,k,n,m代表当前由于无限个质量为n,m的砝码.然后当前有一个秤,你可以通 ...

  7. python3之模块random随机数

    1.random.random() 随机生成一个大于0小于1的随机数. print(random.random()) 0.03064765450719098 2.random.uniform(a,b) ...

  8. free vmstat查看内存及系统调优【转】

    内存查看 查看内存是否存在瓶颈,使用top指令看比较麻烦,而free命令更为直观: [/home/weber#]free total used free shared buffers cached M ...

  9. React-Native 之 ListView使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  10. 错误的理解引起的bug async await 执行顺序

    今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为  await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...