Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格中常用的样式
Blogger Information
Blog 9
fans 0
comment 0
visits 4804
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格中常用的样式
兰博
Original
799 people have browsed it

css

  1. <style>
  2.       /* 1. 添加表格线: 一定要添加到单元格中 td , th */
  3.       table td,
  4.       table th {
  5.         border: 1px solid rgb(27, 27, 27);
  6.       }
  8.       /* 2. 折叠表格线: table */
  9.       table {
  10.         border-collapse: collapse;
  11.       }
  13.       /* 3. 对表格进行一些布局设置 */
  14.       table {
  15.         width: 90%;
  16.         /* margin-left: auto;
  17.         margin-right: auto;
  18.         margin: auto auto; */
  19.         /* 块级元素在父级中的居中 */
  20.         margin: auto;
  21.         /* 文本水平居中 */
  22.         text-align: center;
  23.       }
  25.       /* 标题 */
  26.       table caption {
  27.         font-size: 1.2em;
  28.         margin-bottom: 0.6em;
  29.       }
  31.       table thead {
  32.         background-color: rgb(178, 212, 226);
  33.       }
  35.       /* table tbody .period {
  36.         background-color: lightgreen;
  37.       } */
  39.       /* table tbody tr:first-of-type td:first-of-type { */
  41.       /* 第二个tbody应该去掉,作用:not 取反的伪类 */
  42.       table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  43.         background-color: rgb(170, 224, 170);
  44.       }
  45.     </style>

html代码

  1.  <body>
  2.     <table>
  3.       <caption>
  4.         成都市树德实验中学8年级课程表
  5.       </caption>
  6.       <thead>
  7.         <tr>
  8.           <th>时间</th>
  9.           <th>周一</th>
  10.           <th>周二</th>
  11.           <th>周三</th>
  12.           <th>周四</th>
  13.           <th>周五</th>
  14.         </tr>
  15.       </thead>
  16.       <!-- 上午 -->
  17.       <!-- 第一个tbody  -->
  18.       <tbody>
  19.         <tr>
  20.           <td rowspan="4" class="period">上午</td>
  21.           <td>数学</td>
  22.           <td>语文</td>
  23.           <td>物理</td>
  24.           <td>音乐</td>
  25.           <td>化学</td>
  26.         </tr>
  27.         <tr>
  28.           <td>政治</td>
  29.           <td>历史</td>
  30.           <td>物理</td>
  31.           <td>数学</td>
  32.           <td>体育</td>
  33.         </tr>
  34.         <tr>
  35.           <td>语文</td>
  36.           <td>英语</td>
  37.           <td>物理</td>
  38.           <td>化学</td>
  39.           <td>体育</td>
  40.         </tr>
  41.         <tr>
  42.           <td>英语</td>
  43.           <td>数学</td>
  44.           <td>物理</td>
  45.           <td>语文</td>
  46.           <td>英语</td>
  47.         </tr>
  48.       </tbody>
  49.       <!-- 中午 -->
  51.       <!-- 第二个tbody  -->
  52.       <tbody>
  53.         <tr>
  54.           <td colspan="6">中午休息</td>
  55.         </tr>
  56.       </tbody>
  57.       <!-- 下午 -->
  58.       <!-- 第3个tbody  -->
  59.       <tbody>
  60.         <tr>
  61.           <td rowspan="3" class="period">下午</td>
  62.           <td>音乐</td>
  63.           <td>音乐</td>
  64.           <td>物理</td>
  65.           <td>语文</td>
  66.           <td>英语</td>
  67.         </tr>
  68.         <tr>
  69.           <td>语文</td>
  70.           <td>英语</td>
  71.           <td>物理</td>
  72.           <td>化学</td>
  73.           <td>体育</td>
  74.         </tr>
  75.         <tr>
  76.           <td>英语</td>
  77.           <td>数学</td>
  78.           <td>物理</td>
  79.           <td>语文</td>
  80.           <td>英语</td>
  81.         </tr>
  82.       </tbody>
  83.       <!-- 表尾 -->
  84.       <tfoot>
  85.         <tr>
  86.           <td>备注:</td>
  87.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  88.         </tr>
  89.       </tfoot>
  90.     </table>
  91.   </body>
Correcting teacher：PHPzPHPz

Correction status：unqualified

Teacher's comments：没有总结整理关于 em,rem的特点和应用场景
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post