html,css表格
2019-08-01 09:42
63 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/darkCloudss/article/details/98030793
工作中经常用到,做一下笔记
css
*{ padding:0; margin:0; } body{ overflow-x:hidden; } th,th{ white-space:pre-line; word-wrap: break-word; word-break: break-all; text-align:center; height:50px; overflow:hidden; min-width:85px; font-size:14px !important; } #d_table_title th, #d_table_title td { width:1%; border:1px solid #dda551; background-color:#f0b660; } #d_table_content th, #d_table_content td { width:1%; border:1px solid #e5b66f; } #d_table_content tr{ background-color:#ffdca7; } #d_table_content tr:hover{ background-color:#dfc093; }
html
<div id="d_table_title" style="height:80px;width:100%;margin:0 auto;position:fixed;top:0px;background-color:#dde;z-index:222"> <div style=""> <table id="creative_table_title" style="border-collapse: collapse;width:80%;position:absolute;bottom:0;left:10%;"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </div> </div> <div id="d_table_content" style="width:80%;position:relative;left:10%"> <div> <table id="creative_table_content" style="border-collapse: collapse;margin:80px 0px;width:100%"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </div> </div>
相关文章推荐
- HTML与CSS入门——第七章 使用表格显示信息
- CSS+HTML实例集合三,用户自定义创建表格并删除指定行、列,对表格中的数据进行排序,radio单选摁扭之调查问卷、之选择题
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- HTML与CSS教学-第十章 对表格与表单应用CSS样式
- Head first HTML and CSS 总结- 13.表格
- 滑动固定表格头和列--js,html,css--移动端--基于Iscroll
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- JavaWeb - HTML,字体/列表/图形/超链接/表格/表单/其它(标签),CSS,CSS与HTML结合方式,CSS选择器,CSS扩展选择器
- html css 表格边框
- html+css学习笔记 5[表格、表单]
- html/css 表格元素以及表格布局
- 【WEB基础】HTML & CSS 基础入门(7)表格
- 前端学习 -- Html&Css -- 表格
- CSS如何设置html table表格边框样式
- [修改后]html+css 做成一个可浏览的表格
- bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示
- CSS教程,CSS固定表头的HTML表格
- HTML+CSS绘制表格
- HTML&CSS基础篇之十五:表格&列表
- 表格 CSS(不换行) HTML <td> 标签的 nowrap 属性