上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了，发现在这个属性恐怖面貌其实都是脆弱的伪装。除了部分常用属性外，其他的都是传说哥。既然是传说哥，请不要迷恋。就让传说继续传说着吧。这次我们来搞定table-cell这个货。（table-cell：IE6、7不支持）table-cell这个家伙在国外的网站中偶有露头，天朝由于IE6、7这两个货泛滥成灾，难有发挥，那么，这个家伙到底能干些什么呢？...
（1）用expression鼠标滑过变色：<style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td {onmouseover:expression(onmouseover=function (){this.style.borderColor =‘blue‘;this.style.color=‘red‘;this.style.backgroundColor =‘yellow‘}); onmouseout: expression(onmouseout=function (){this.style.borderColor=‘‘;this.style.color=‘‘;this.style.backgroundColor =‘‘}...
今天发现即使设置table的td、th宽度，仍是不管用，是根据table的td的内容来适应宽度，导致其他的th、td丢失。下图就是浏览器渲染的table，导致缺失“端口”这一列，因为“设备名称”中的td内容太长导致。代码： <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1" id="dvrEquipnet"><tr><th scope="col" width="15%">设备ID</th><th scope="col" width="15%">管理服务器ID</th><th scope="col" wi...
TW的正文页之前为了考虑小显示器小风辨率的用户，宽度用了 850px，现在用大分辨率的用户越来越多，为了跟首页统一，都要改成950px。因为2年前做页面的时候就用了CSS布局，所以，虽然正文页有几十万个页面，但只修改了一个css文件和几个相关的图片，就都变了。如果当初用了table布局，后果不不堪设想….. 早几年，网上曾兴起过CSS布局和Table布局的争论，一部分人不以为然，认为css只不过是个嗷头，费时又费力，还有一部分人被阴魂不...
1<html> 2<head> 3<script type="text/javascript"> 4/**5 最近因项目的需求，有这样的一个问题：6 一个table显示n条记录，每3行换一次颜色，例如：1，2，3行红色背景，4，5，6行绿色背景，7，8，9行红色背景...以此类推！7*/ 8 window.onload=function() { 9var tbl = document.getElementById("table"); // 先获取table10var rows = tbl.getElementsByTagName("tr"); // 获取里面的行tr11for(...
table tbody { display:block; height:195px; overflow-y:scroll;}table thead, tbody tr { display:table; width:100%; table-layout:fixed;}原文：http://www.cnblogs.com/FineDay/p/7511647.html
在做responsive或者手机版页面的时候，经常碰到<Table>在手机和平板中会因为长度问题把页面撑大。最近看到一个比较好，比较方便的方法，而且仅仅用CSS 2就可以实现！实例URL：http://dbushell.com/demos/tables/rt_05-01-12.html已经验证支持webkit引擎及firefox，很可惜IE这个混蛋不能改table标签的display属性。慢点看看有没有什么trick的方法可以做到兼容。主要用到的CSS如下：可以从CSS中看到，作者主要是运用了display: block...
display：table布局单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等.table表格中的单元格最大的特点之一就是同一行列表元素都等高。display:table-cell下的列表布局最适用的场景是：列表个数不固定，但是，无论列表几个，都平分容器空间。什么意思呢？就是如果4个列表，希望每个宽度25%，3个就33.3333%，2个列表希望每个宽度50%。此时，没有比display:table-cell更合适的技术了。设置了display:table-cell的元素对...
http://blog.alipay.com/2308.html作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。...
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。 使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。 在深入了解这种方法之前，让我们先来写份HTML文档实例：<div id="wrapper"><div id="main"><di...
div+css table表格样式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>table</title><style type="text/css"> .table{width:400px;font-size:14px;font-family:"迷你简黑体";} .tr{width:33.3%;float:left;} .td{bor...
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是...
【本文为原创，转载请注明出处】技术【CSS+HTML】 布局【Table】图片准备【百度图标、10张不同类型图】------------------------------------------------------------------------------------------------------------步骤1 table 布局 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>仿百度网页</title> 6</head> 7<body> 8<table"> 9<tr>10<td></td>11<td></td>12<td></td>13<td></td>14<td>...
目录' ref='nofollow'>< table > 标签的特有属性' ref='nofollow'>< table > 标签的特有属性' ref='nofollow'>< td > 标签特有的属性' ref='nofollow'>< td > 标签特有的属性 以 < colgroup >' ref='nofollow'>< col > 以 < colgroup > 特有属性' ref='nofollow'>< col > 特有属性 在css中的可设定样式' ref='nofollow'>< table > 在css中的可设定样式HTMLTableElement对象的方法< table >< table > 标签的特有属性cellpadding:用...
display:table-cell的用法简介:display属性的使用相当频繁，比如display:block或者display:inline等，但是对于display:table-cell可能比较陌生，因为此属性在特定的情况下会发挥很大的作用，下面就简单介绍它的作用，先看一段代码实例: 蚂蚁部落.parent{ width:600px; height:600px; background-color:green; vertical-align:middle;}.children{ width:100px; height:100px; background-color:red;} 在以上代码...