zoukankan      html  css  js  c++  java
  • CSS构造表格

    1. 表格的基础构造
    2. 边距和边线应用
    3. 隐藏和删除应用
    4. 简单表格

      table {

          auto;

          border-collapse:collapse;(把单元格空隙合并起来)

          margin-left:20px;

          border:1px solid black;

      }

      td,th {

          50px;

          border:1px solid black;

          padding:5px;

          background:gold;

          text-align:center;

          vertical-align:middle;

          text-indent:5px;

      }

       

      <table>

          <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

          <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

      </table>

       

      <table>

          <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

      </table>

       

    5. 行组和列组

      table.example1 thead {

          background:orange;

          color:black;

      }

      table.example1 tbody {

          background:gold;

          color:black;

      }

      table.example1 tfoot {

          background:firebrick;

          color:white;

      }

       

      *.col1 {

          background:wheat;

      }

      *.col2 {

          background:gold;

      }

      *.col3 {

          background:orange;

      }

      *.col4 {

          background:tomato;

      }

      *.col5 {

          background:firebrick;

      }

      *.col6 {

          background:black;

          color:white;

      }

       

      <table class="example1">

          <thead>

              <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

          </thead>

          <tbody>

              <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

          </tbody>

          <tfoot>

                   <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

      </tfoot>

      </table>

       

      <table>

          <colgroup>

              <col class="col1" />

              <col class="col2" />

              <col class="col3" />

              <col class="col4" />

              <col class="col5" />

              <col class="col6" />

          </colgroup>

          <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>

          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

      </table>

       

    6. 表格选择符

      <table class="example1">

          <thead>

              <tr>

      <th class="t1">1</th>

      <th class="t2">2</th>

      <th>3</th>

      <th>4</th>

      <th>5</th>

      <th>6</th>

      </tr>

          </thead>

          <tbody>

              <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>

          </tbody>

          <tfoot>

                   <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

      </tfoot>

      </table>

       

    7. 分隔的边框

      table {

          border-collapse:separate;

      }

       

      td,th {

          50px;

          padding:5px;

          text-align:center;

          vertical-align:middle;

          background:gold;

          text-indent:5px;

      }

       

      .boxed-table {

          border:1px solid black;

      }

       

      .boxed-cells td {

          border:1px solid black;

      }

       

      .boxed-cells td.x {

          border:none;

      }

       

      <h2>封装的表格</h2>

      <table class="boxed-table" cellspacing="5">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

       

      <h2>封装的单元格</h2>

      <table class="boxed-cells" cellspacing="5">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

      <h2>封装的单元格和表格</h2>

      <table class="boxed-table boxed-cells" cellspacing="5">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

       

    8. 重复的边框

      table {

          border-collapse:collapse;

      }

       

      td,th {

          50px;

          padding:5px;

          text-align:center;

          vertical-align:middle;

          background:gold;

          text-indent:5px;

      }

       

      .boxed-table {

          border:1px solid black;

      }

       

      .boxed-cells td {

          border:1px solid black;

      }

       

      .boxed-cells td.x {

          border:none;

      }

       

      <h2>封装的表格</h2>

      <table class="boxed-table" cellspacing="0">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

      <h2>封装的单元格</h2>

      <table class="boxed-cells" cellspacing="0">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

      <h2>封装的单元格和表格</h2>

      <table class="boxed-table boxed-cells" cellspacing="0">

          <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>

          <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>

      </table>

       

       

    9. 隐藏和删除单元格、行、列

      table {

          border-collapse:separate;

      }

      td,th {

          50px;

          padding:5px;

          text-align:center;

          vertical-align:middle;

          background:gold;

          text-indent:5px;

          border:1px solid black;

      }

       

      .hidden {

          visibility:hidden;

      }

       

      .delete {

          display:none;

      }

       

      <table>

      <colgroup>

      <col class="hidden delete" />

      </colgroup>

          <tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>

          <tr>

      <td class="hidden">5</td>

      <td class="hidden">6</td>

      <td>7</td>

      <td>8</td>

      </tr>

      </table>

       

    10. 垂直对齐数据

      .x {

          vertical-align:middle;

      }

       

      8.鼠标悬浮时表格颜色替换

      table th:hover{

          background:green;

      }

       

      table td:hover{

          background:blue;

      }

  • 相关阅读:
    A1052. Linked List Sorting (25)
    A1032. Sharing (25)
    A1022. Digital Library (30)
    A1071. Speech Patterns (25)
    A1054. The Dominant Color (20)
    A1060. Are They Equal (25)
    A1063. Set Similarity (25)
    电子码表
    矩阵键盘
    对象追踪、临时对象追踪、绝对坐标与相对坐标
  • 原文地址:https://www.cnblogs.com/lifi/p/5728709.html
Copyright © 2011-2022 走看看