一、设置td的宽和高,不设置table的宽和高

1. 当td的值为具体数值时

a. td显示的宽按设置的数值变动,但宽度不会大于父元素;若强行将宽设置的大于父元素的宽,会被系统无视,即最大宽度为父元素的宽度

b. td显示的高按设置的数值变动,高度无限制,可以自由伸缩

2.  当td的值为百分比时

a. td显示的宽度会变,百分比越大,宽度越小;百分比越小,宽度越大;<!--不知道百分比是按哪个元素走的-->宽度最小不会小于内容宽度,最大不会大于父元素的宽度

b.高按内容高度显示,不会改变

二、设置td的宽和高,同时设置table的宽和高

1. 当table的值为具体数值时

1)td也为数值时

a. 若td的宽和高小于table的值,宽度和高度按table的数值显示

b. 若td的宽大于table的宽,按table的宽度显示

c. 若td的高大于table的高,按td的高度显示

2)td为百分比时

a. 无论td的宽和高多大或者多小,都按table的值显示

2. 当table的值为百分比时,百分比的依据为父元素

1)td为数值时

a. td的宽按table的宽度显示

b. td的高大于table时,按td走;td的高小于table时,按table走

2)td也为百分比时

a. 无论td的宽和高多大或者多小,都按table的值显示

PS:内容按td的高度垂直居中

试了半天得出的结论,刚开始学,好晕= =#

有没有规律可循?

td元素的更多相关文章

  1. td 元素属性 noWrap 防止折行、撑开及文字换行

    最近调试程序,遇到如下问题: 也就是这个表格里面的文字被换行了,究其原因,主要是td中的width之和超过了100%导致的.谷歌了好久,终于发现,可以用noWrap="noWrap" ...

  2. td:first-child 伪类 匹配第一个 匹配第一个 <td> 元素

    css代码: td:first-child{border-right: 1px solid #d9dbdd; } 备注:在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素: 链接:htt ...

  3. td内元素居顶,td元素不随高度的撑开而变位置

    如下图,右边内容变高了,左边元素位置就下降到居中 设置居顶不变的方法 <table width="200" border="1"> <tr&g ...

  4. firefox 对相对定位的TD元素渲染错误

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  5. jquery 对table的一些操作 怎么获取tr下的第二个td元素?

    1.HTML结构 <table id = "test"> <tr><td>1</td><td>1</td>& ...

  6. IE8 td元素 width无效的bug;

    不经意间做项目发现IE的td在某种情况下好奇怪,自己设置的width不起作用: 后经google大法,发现解决方案:已验证过完美解决bug; <table style="width:  ...

  7. Jquery 获取table中的td元素的值

    <table id="t1"> <tr> <td> 1-1 </td> <td> 1-2 </td> < ...

  8. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  9. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

随机推荐

  1. 【转】HTTP 头部解释,HTTP 头部详细分析,最全HTTP头部信息

    HTTP 头部解释 ========================================================================================== ...

  2. 字节流和字符流(InputStream类和OutputStream类)

    java流包括字节流和字符流,字节流通过I/O设备以字节数据的方式读入,而字符流则是通过字节流读入数据转换成字符"流"的形式由用户驱使. InputStream是所有字节输入流的父 ...

  3. RDIFramework.NET 中多表关联查询分页实例

    RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...

  4. NULL对反连接的影响

    测试准备: create table t1(col1 number,col2 varchar2(1)); create table t2(col2 varchar2(1),col3 varchar2( ...

  5. R&&rstudio

    R sudo apt-get install R-base Rstudio()下载Rstudio桌面版失败 sudo apt-get install gdebi-core 如果提示少了什么东西,运行下 ...

  6. Python的文本数据

    字符串的一些方法! 1.text.endswith(".jpg")        如果字符串是以给定子字符串结尾的,就返回值True. 2. text.upper():       ...

  7. 【过程改进】 windows下jenkins常见问题填坑

    没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4 ...

  8. 改int非空自增列为int可为空列

    ) --声明读取数据库所有数据表名称游标mycursor1 open mycursor1 --从游标里取出数据赋值到我们刚才声明的数据表名变量中 fetch next from mycursor1 i ...

  9. 【实践】jQuery实现三联联动

    网上看过很多关于联动的jq或js代码,最近班上的前端大神教了我一种比网上还简单的jq联动方法,自己琢磨过之后确实比其他方法更简单更简洁所以在这里分享一下 先上html代码 <div id=&qu ...

  10. 关于学习Knockoutjs--入门(二)

    这两天终于闲一丢丢了,可以有多点时间学习一下拉.接下来要写到的还是Knockoutjs. Knockout是建立在以下3个核心功能之上的: 1. 属性监控与依赖跟踪 2. 声明式绑定 3. 模版机制 ...