`
jsntghf
  • 浏览: 2543022 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS细线表格

阅读更多
<style type="text/css">
  table {
    border-collapse: collapse;
    line-height: 125%;
  }

  th, td {
    text-align: left;
    vertical-align: top;
  }

  table {
    margin: 1em 0 0 1px;
    border: 1px solid;
    border-color: #3366CC;
    border-spacing: 0;
    border-collapse: collapse;
    clear: right;
  }

  th {
    font-weight: bold;
    text-align: left;
    padding: 6px 12px;
    border: 1px solid #3366CC;
    background-color: #e5ecf9;
  }

  td {
    padding: 6px 12px;
    border: 1px solid #3366CC;
    background-color: white;
    text-align: left;
    vertical-align: top;
  }

  td h1, td h2, td h3, td h4, td h5 {
    margin-left: 0;
  }

  td ul, td ol {
    margin: 0 0 1em 15px;
    padding: 0;
  }

  td p, td dl {
    margin: 0 0 1em 0;
    padding: 0;
  }

  td *+p {
    margin: 1em 0 0 0;
    padding: 0;
  }

  tr.alt td, td.alt {
    background: #f5f5f5;
  }
</style>
<table>
  <th>A</th>
  <th>B</th>
  <tr class="alt">
    <td class="alt">1</td>
    <td class="alt">2</td>
  </tr>
  <tr>
    <td><p>3</p></td>
    <td><ul><li>4</li><li>5</li></ul></td>
  </tr>
  <tr class="alt">
    <td class="alt">6</td>
    <td class="alt">7</td>
  </tr>
</table>

 

最终效果:

 

分享到:
评论

相关推荐

    利用CSS生成精美细线Table表格

    本篇我们将深入探讨如何利用CSS生成精美细线Table表格,以提升网页内容的可读性和美观度。 首先,我们需要了解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素开始,内部包含`&lt;tr&gt;`(行)元素,每行中又有`...

    css 细线表格 css制作table细线表格常用属性

    在CSS中,制作细线表格是一项常见的任务,它可以使数据展示更加清晰且美观。下面将详细介绍如何使用CSS来优化和创建细线表格,以及其中涉及的关键属性。 首先,要实现细线表格,一个非常关键的属性是`border-...

    html中细线表格的做法

    在第二种方法中,我们使用CSS边框样式来实现细线表格。下面是相关的代码: ```html ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ``` 在上面的代码中,我们使用了CSS边框样式来设置单元格的...

    css创意ul+li实现的细线表格实现代码

    css创意ul+li实现的细线表格实现代码 css创意ul+li实现的细线表格效果,不用table,是一种非常有创意的网页设计方法。通过使用ul和li标签,可以创建一个细线表格的效果,而不需要使用传统的table标签。 ul和li...

    CSS制作符合网站标准的细线表格

    本教程将详细介绍如何使用CSS来创建符合Web标准的细线表格,使表格既美观又符合现代网页设计的要求。 首先,我们需要了解CSS中的几个关键属性来实现细线表格的效果。`border`属性用于设置元素的边框,`border-width...

    html制作细线表格的简单实例

    HTML制作细线表格的实例中主要涉及的知识点包括HTML表格的属性设置、CSS样式应用、以及通过CSS控制表格边框的视觉效果。以下是详细的解释: 1. table标签属性设置:在HTML中,创建表格通常使用table标签,并且可以...

    利用CSS生成精美细线Table表格无需复杂style代码

    首先,要创建细线表格,我们需要引入一个预定义了表格样式的CSS文件,例如名为`table.css`的文件。在HTML文档的`&lt;head&gt;`部分,添加以下代码来引入这个CSS文件: ```html &lt;link rel="stylesheet" type="text/css" ...

    纯CSS3表格美化特效.zip

    2. **边框塌陷与边框样式**:CSS3允许我们通过`border-collapse`属性控制表格的边框合并,创建出不同风格的边框效果,如细线边框、双线边框等。 3. **背景渐变与颜色**:利用`background-image`的线性或径向渐变,...

    兼容浏览器的css网页细线表格设计

    本篇文章将深入探讨如何使用CSS来创建兼容浏览器的细线表格设计。 首先,要理解表格边框的兼容性挑战。在不同浏览器中,表格边框的渲染可能会有所不同,这主要是因为不同的浏览器对CSS标准的实现可能有轻微的差异。...

    CSS去除表格的默认间距并且制作1px的细线表

    现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有...

    WEB标准中细线表格的实现方法

    在本文中,我们将深入探讨如何使用Web标准中的CSS来实现细线表格。 首先,我们要了解`border-collapse`属性,这是实现细线表格的关键。`border-collapse`用于控制表格单元格边框的合并方式。当设置为`collapse`时,...

    网页设计中表格相关使用技巧

    细线表格因其更为精致、优雅的外观,在现代网页设计中非常受欢迎。本文介绍了三种实现细线表格的方法: 1. **使用“Style”参数**:这是当前比较流行的做法之一。通过设置`border-style`为`solid`或`dashed`等样式...

    Dreamweaver中不用CSS样式为表格添加细线边框的方法

    本篇文章将详细介绍如何在Dreamweaver中不用CSS样式为表格添加细线边框。 首先,我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`元素表示表格行,`&lt;td&gt;`元素表示单元格。要设置表格的边框,我们...

    Web分页打印 细线表格+分页打印之终极攻略

    2. 通过调整CSS样式实现细线表格效果。 3. 使用`page-break-after`属性控制页面分隔。 4. 在`&lt;thead&gt;`中设置`display: table-header-group`以保证每页都有表头。 遵循这些步骤,你可以创建一个既美观又实用的分页...

Global site tag (gtag.js) - Google Analytics