css 表格
1.给元素的display属性添加为以下值
table : <table>
table-caption :<caption>
table-cell : <td>
table-row :<tr>
table-row-group :<tbody>
table-column : <col>
table-column-group :<colgroup>
table-header-group : <thead>
table-footer-group : <tfoot>
2.实现简单的三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css html</title>
<style type="text/css">
.container {
display: table;
}
.row {
display: table-row;
} .cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}
</style>
</head>
<body> <div class="container">
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
</div> </body>
</html>
3.如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样
即以下部分可以省略
<div class=”container”>
<div class=”row”>
.container {
display: table;
}
.row {
display: table-row;
}
4.其他有用的属性
table-layout 将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。
Border-collapse 定义边框
Border-spacing 声明“border-collapse:separate;”后,可用border-spacing属性来定义相邻两个单元格边框间的距离。
css 表格的更多相关文章
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一.表格样式 表格有五 ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节,CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一.表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- CSS:CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
- 3月23.CSS表格布局
360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...
- HTML学习笔记 CSS表格及轮廓案例 第八节 (原创)参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
随机推荐
- Map三种遍历方式
Map三种遍历方式 package decorator; import java.util.Collection; import java.util.HashMap; import java.util ...
- 深度系统deepin使用初体验
最近使用linux系统比较多,因为很多项目要用到,而且厌烦了windows流氓软件各种广告的繁琐,因此决定在自己的本子上安装linux系统.然后了解到了deepin操作系统,竟然是武汉一个公司发行的版 ...
- WAV文件头相关资料
http://stackoverflow.com/questions/6284651/avaudiorecorder-doesnt-write-out-proper-wav-file-header h ...
- linux和windows下的自动ftp脚本(shell bat)
一.先来看linux下的: 复制代码 代码如下: #! /bin/bashcd /ftp/CURRENTDATE=` date +%Y%m%d `YESTERDAY=` date -d yesterd ...
- android源码修改,实现长按电源键直接关机
版本:android 4.4.2 源文件路径:frameworks\base\policy\src\com\android\internal\policy\impl\PhoneWindowManage ...
- Arduino学习经验(一)之解决舵机库和pwm输出冲突
一.前言 最近在公司学习Arduino uno ,用它实现小车超声波避障功能.实现的功能很简单,就是在小车前方挂一个超声波模块,当碰到障碍物时,会通过舵机进行摆头,判断两边的距离,进行左右转弯.但是碰 ...
- [LeetCode_2] Add Two Numbers
LeetCode: 2. Add Two Numbers /** * Definition for singly-linked list. * struct ListNode { * int val; ...
- [转载]Back up all of your mysql databases nightly
原文地址:http://www.linuxbrigade.com/back-up-all-of-your-mysql-databases-nightly/ Put the following into ...
- JAVA可阻塞队列-ArrayBlockingQueue子类BlockingQueue的应用,使用它来实现子线程打印10次,主线程打印100次,如此反复
/** * 使用BlockingQueue实现主子线程互相打印 * @author duwenlei * */ public class BlockingQueueTest { public stat ...
- jQuery学习笔记(四)jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...