深圳全飞鸿

标题: 关于table的CSS式样的专门研究 [打印本页]

---

作者: zhgc    时间: 2020-3-6 18:50
标题: 关于table的CSS式样的专门研究
1.float和margin
css部分：

1. .main{overflow:hidden;min-width:405px;}
   
2. .left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
   
3. .left {background-color: #00acac;width: 200px;float: left; }
   
4. .right {background-color: #0000ff;width: 200px;float: right;}
   
5. .center {background-color: #000000;margin:0 200px;}

复制代码

2.html部分

1. <div class="main">
   
2.     <div class="left">
   
3.         <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
   
4.         <p>ssssssssssssssssssssssssssssssssssssssssss1111111111111111111111111</div>
   
5.     <div class="right"> <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
   
6.         <p>sssssssssssssssssssssssssssssssssssssssss</p>
   
7.         1111111111111111111111222222222222222222</div>
   
8.     <div class="center"> <div>sssssssssssssssssssssssssss</div>
   
9.         <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
   
10.         1111111111111111字文字文字文字文字</div>
    
11. </div>

复制代码

---

作者: zhgc    时间: 2021-6-30 21:59

---

作者: zhgc    时间: 2021-6-30 22:02

• 单元格(cell) -- 表格的内容
• 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
• 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
  

上图说明了表格的几个属性,其中黑色部分就是单元格(cell)，白色的区域是单元格边距(表格填充)，灰色的区域是单元格间距(表格间距)。

---

作者: zhgc    时间: 2021-6-30 22:07

---

欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/)

Powered by Discuz! X3.2