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,表格)