`
疯不觉
  • 浏览: 7069 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

css 实现 table斜线表头

表头 斜线 
阅读更多
  1. border-left  border-right border-top border-bottom 能实现特殊形状  
[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>资费标准</title>  
  6. <style type="text/css">  
  7. table {  
  8.     border-collapse: collapse;  
  9.     border: 1px #e3e3e3 solid;  
  10.     width: 96%;  
  11.     margin: 0 auto;  
  12.     margin-top: 30px;  
  13.     margin-bottom:50px;  
  14. }  
  15.   
  16. th, td {  
  17.     border: 1px solid #e3e3e3;  
  18.     text-align: center;  
  19.     font-size: 35px;  
  20.     line-height: 100px;  
  21.     background: #C6C7C6;  
  22. }  
  23.   
  24. th {  
  25.     background: #199fff;  
  26.     color: white;  
  27. } /*模拟对角线*/  
  28. .out {  
  29.     border-top: 5em #199fff solid; /*上边框宽度等于表格第一行行高*/  
  30.     border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
  31.     position: relative; /*让里面的两个子容器绝对定位*/  
  32.     color:white;  
  33. }  
  34.   
  35. b {  
  36.     font-style: normal;  
  37.     display: block;  
  38.     position: absolute;  
  39.     top: -5.3em;  
  40.     left: -160px;  
  41.     width: 200px;  
  42. }  
  43.   
  44. em {  
  45.     font-style: normal;  
  46.     display: block;  
  47.     position: absolute;  
  48.     top: -78px;  
  49.     left: -230px;  
  50.     width: 200px;  
  51. }  
  52.   
  53. .assessDetail td {  
  54.     background-color: #FFF;  
  55. }  
  56. </style>  
  57. </head>  
  58. <body style="background-color: #f0f0f6;color:#404040;">  
  59.     <table>  
  60.         <tr>  
  61.             <th style="width:200px;">  
  62.                 <div class="out" style="font-size:27px">  
  63.                     <b>消费类型</b> <em>通话类型</em>  
  64.                 </div>  
  65.             </th>  
  66.             <th>通话时长</th>  
  67.             <th>虚拟币</th>  
  68.         </tr>  
  69.   
  70.         <tr  class="assessDetail">     
  71.               <td>国内直拨</td>     
  72.               <td>1 时长/分钟</td>     
  73.               <td>0.05/分钟</td>     
  74.           </tr>     
  75.           <tr  class="assessDetail">     
  76.               <td>国内回拨</td>     
  77.               <td>2 时长/分钟</td>     
  78.               <td>0.1/分钟</td>     
  79.           </tr>   
  80.           <tr  class="assessDetail">     
  81.               <td>洛杉矶</td>     
  82.               <td>1 时长/分钟</td>     
  83.               <td>0.2/分钟</td>     
  84.           </tr>   
  85.           <tr  class="assessDetail">     
  86.               <td >温哥华</td>     
  87.               <td>1 时长/分钟</td>     
  88.               <td>0.5/分钟</td>     
  89.           </tr>   
  90.           <tr  class="assessDetail">     
  91.               <td >香港</td>     
  92.               <td>1 时长/分钟</td>     
  93.               <td>0.3/分钟</td>     
  94.           </tr>   
  95.         <tr>  
  96.         </tr>  
  97.     </table>  
  98. </body>  
  99. </html>  

 

分享到：
echarts实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    5种做法实现table表格中的斜线表头效果

    实现斜线表头有多种方法，下面将详细介绍这五种方法的实现原理和适用场景。 1. 图片背景法 直接利用UI设计人员制作好的带有斜线的图片作为表格表头的背景图，通过CSS将背景图铺满整个表头单元格。这种方法操作简单...

    CSS控制table表头

    CSS控制table表头

    ccs制作表头有斜线的表格

    接下来，我们需要使用CSS来调整这些元素的样式，以实现斜线效果。这里的关键是使用伪元素`::before`和`::after`以及`transform`属性。下面是一段示例CSS代码： ```css th { position: relative; } .cell-content ...

    Html中用table画斜线

    本文将详细讲解如何在HTML的`&lt;table&gt;`中实现斜线的绘制。 首先，让我们了解HTML `&lt;table&gt;`的基本结构。一个简单的表格由`&lt;table&gt;`标签开始，包含若干行`&lt;tr&gt;`（表格行）和列`&lt;td&gt;`（表格数据单元格）。例如： ```...

    用js作表格的表头斜线

    在网页设计中，创建带有斜线的表格表头...这种方法灵活且易于适应不同的表头布局，使得在不使用图片或CSS伪元素的情况下也能实现复杂的表头设计。在实际项目中，你可以根据需要调整这个示例，以适应不同的需求和样式。

    css 模拟表格斜线

    然而，使用纯CSS来实现这个效果，我们可以利用边框重叠的原理，即当两个边框的厚度总和大于单元格的厚度，并且这两个边框的颜色不同时，在它们相遇的位置就会产生斜线的效果。这是因为边框重叠部分的像素颜色会受到...

    【JavaScript源代码】vue element 表头添加斜线的实现代码.docx

    总结一下，要在Vue.js中使用Element UI的`el-table`实现表头斜线，你需要创建一个自定义CSS类，用于在表头单元格内绘制斜线，并将其应用到包含子列的表头元素上。通过这种方式，你可以创建出视觉上分隔的复合列，更...

    ReactJs编写的带斜线，行和列都分组的表格

    - 斜线分隔可以使用CSS来实现，通过伪元素`::before`或`::after`添加线条，并调整定位。 4. **状态管理**： - 如果表格需要支持交互，如排序、筛选或展开/折叠分组，可以在`GroupedTable`组件中设置状态来管理...

    layui-高级表格-soul-table功能-HTML源码

    在传统的HTML表格中，表头通常固定不变，但在soul-table中，你可以根据需求自由调整表头样式、添加复杂的表头结构，如合并单元格、设置斜线等，满足了多样化的展示需求。 其次，多行表头是soul-table的另一个特色...

    纯CSS3实现漂亮的价格表样式代码.zip

    在HTML中，可以使用`&lt;table&gt;`元素创建表格，`&lt;thead&gt;`定义表头，`&lt;tbody&gt;`存储数据行，`&lt;tr&gt;`表示行，`&lt;th&gt;`表示表头单元格，而`&lt;td&gt;`表示数据单元格。为了优化可访问性和语义化，确保正确使用这些元素。 接着，CSS...

    表格样式

    7. **自定义表头**：使用CSS可以创建复杂的表头样式，如斜线分割的多列标题，或者带有下拉菜单的表头单元格。 8. **可扩展性与自定义组件**：在开发过程中，可以考虑创建可复用的表格组件，这样在多个项目中都能...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态...

    程序天下:JavaScript实例自学手册

    9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态...

    HTML入门学习教程！

    `&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头）和`&lt;td&gt;`（单元格）用于创建表格： ```html &lt;table&gt; 姓名 年龄 张三 &lt;td&gt;25 李四 &lt;td&gt;30 &lt;/table&gt; ``` 七、CSS基础 虽然不是HTML的一部分，但CSS...

    HTML语法教学

    `&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示行，`&lt;th&gt;`是表头单元格，`&lt;td&gt;`则是数据单元格。 七、区块与内联元素 `&lt;div&gt;`和`&lt;span&gt;`是基础的布局元素。`&lt;div&gt;`是块级元素，会占据整行；`&lt;span&gt;`是内联元素，只占据自身...

    静态Html编程精彩案例教程

    4. 表格与表单：`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示行，`&lt;th&gt;`定义表头，`&lt;td&gt;`表示数据单元格。HTML表单通过`&lt;form&gt;`、`&lt;input&gt;`、`&lt;select&gt;`和`&lt;textarea&gt;`等标签收集用户输入，实现互动功能。 5. 链接与导航...

    xml实用教程第2章HTML基础.pdf

    - `&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`用于创建表格，`&lt;tr&gt;`定义行，`&lt;td&gt;`定义单元格，`&lt;th&gt;`定义表头。 **2.3 文字修饰** HTML提供了一些标记来格式化文本，如`&lt;b&gt;`、`&lt;i&gt;`、`&lt;u&gt;`分别用于加粗、斜体和下划线。 *...

    httt：tt

    6. **表格**：`&lt;table&gt;`创建表格，`&lt;tr&gt;`定义行，`&lt;th&gt;`定义表头，`&lt;td&gt;`定义单元格。 7. **样式**：虽然HTML主要关注内容结构，但可以通过`&lt;style&gt;`元素内联定义样式，或通过`&lt;link&gt;`引用外部CSS文件来实现更复杂...

    random

    表格（`&lt;table&gt;`）是HTML中的一个重要组成部分，`&lt;tr&gt;`表示表格行，`&lt;td&gt;`表示单元格，`&lt;th&gt;`表示表头单元格。列表分为有序列表（`&lt;ol&gt;`，`&lt;li&gt;`）和无序列表（`&lt;ul&gt;`，`&lt;li&gt;`）。`&lt;div&gt;`元素是块级元素，常用于组合...

Magicbox
Global site tag (gtag.js) - Google Analytics