完整的日历表格

最新推荐文章于 2020-07-25 17:55:04 发布

原创最新推荐文章于 2020-07-25 17:55:04 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#table #日历表格 #标准 #规范

html5&&css3 专栏收录该内容

37 篇文章

订阅专栏

本文通过实例展示了如何使用CSS美化日历样式，并解析了固定布局表格的概念及应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平时写表格都直接table然后tr td就完事了，其中还是有很多不完善的，今天按照标准写了个日历，带样式。供日后写表格提供一个参考，搞前端规范还是挺重要的
效果地址：http://codepen.io/tianzi77/pen/JdGpwj

css部分：

body {
    font-family: "myriad pro", arial, helvetica, sans-serif;
  font-size:16px;
  line-height:1.125em; /* Baseline grid of 18px */
}


/* tables may still need 'cellspacing="0"' in the markup */
table.cal {
    border-collapse: seperate;
    border-spacing: 0;
    text-align: center;
    color: #333;
}

.cal th, .cal td {
    margin: 0;
    padding: 0;
}

.cal caption {
    font-size:1.25em;
    padding-top: 0.692em;
    padding-bottom: 0.692em;
    background-color: #d4dde6;
}

.cal caption [rel="prev"] {
    float: left;
    margin-left: 0.2em;
}

.cal caption [rel="next"] {
    float: right;
    margin-right: 0.2em;
}


.cal thead th {
    background-color: #d4dde6;
    border-bottom: 1px solid #a9bacb;
    font-size:0.875em;
}


.cal caption a:link,
.cal caption a:visited {
    text-decoration: none;
    color: #333;
    padding: 0 0.2em;
}

.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus {
    background-color: #6d8ab7;
}



.cal tbody {
    color: #a4a4a4;
    text-shadow: 1px 1px 1px white;
    background-color: #d0d9e2;
}

.cal tbody td,
.cal tbody td.null:hover {
    border-top: 1px solid #e0e0e1;
    border-right: 1px solid #9f9fa1;
    border-bottom: 1px solid #acacad;
    border-left: 1px solid #dfdfe0;
}

.cal tbody tr td:first-child {
    border-left: 1px solid #a9bacb;
}

.cal tbody a {
    display: block;
    text-decoration: none;
    color: #333;
    background-color: #c0c8d2;
    font-weight: bold;
    padding: 0.385em 0.692em 0.308em 0.692em;
}

.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active,
.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody .selected a:hover,
.cal tbody .selected a:focus,
.cal tbody .selected a:active {
    background-color: #6d8ab7;
    color: white;
    text-shadow: 1px 1px 2px #22456b;
    -webkit-box-shadow: inset 2px 2px 3px #22456b;
    -moz-box-shadow: inset 2px 2px 3px #22456b;
}


.cal tbody td:hover,
.cal tbody td.selected {
    border-top: 1px solid #2a3647;
    border-right: 1px solid #465977;
    border-bottom: 1px solid #576e92;
    border-left: 1px solid #466080;
}

demo结构：

<table class="cal" summary="A calandar style date picker" cellspacing="0">
<caption>
    <a href="#" rel="prev">&lt;</a> January 2008 <a href="#" rel="next">&gt;</a>
</caption>
<colgroup>
  <col id="sun" />
  <col id="mon" />
  <col id="tue" />
  <col id="wed" />
  <col id="thur" />
  <col id="fri" />
  <col id="sat" />
</colgroup>

<thead>
    <tr>
        <th scope="col">Sun</th>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
        <th scope="col">Thu</th>
        <th scope="col">Fri</th>
        <th scope="col">Sat</th>
    </tr>
</thead>

    <tbody>
        <tr>
            <td class="null">30</td>
            <td class="null">31</td>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
        </tr>
        <tr>
            <td><a href="#">6</a></td>
            <td><a href="#">7</a></td>
            <td class="selected"><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">10</a></td>
            <td><a href="#">11</a></td>
            <td><a href="#">12</a></td>
        </tr>
        <tr>
            <td><a href="#">13</a></td>
            <td><a href="#">14</a></td>
            <td><a href="#">15</a></td>
            <td><a href="#">16</a></td>
            <td><a href="#">17</a></td>
            <td><a href="#">18</a></td>
            <td><a href="#">19</a></td>
        </tr>
        <tr>
            <td><a href="#">20</a></td>
            <td><a href="#">21</a></td>
            <td><a href="#">22</a></td>
            <td><a href="#">23</a></td>
            <td><a href="#">24</a></td>
            <td><a href="#">25</a></td>
            <td><a href="#">26</a></td>
        </tr>
        <tr>
            <td><a href="#">27</a></td>
            <td><a href="#">28</a></td>
            <td><a href="#">29</a></td>
            <td><a href="#">30</a></td>
            <td><a href="#">31</a></td>
            <td class="null">1</td>
            <td class="null">2</td>
        </tr>
    </tbody>

写在最后：这就是精通css里面的一个列子，觉得很好，敲出来留恋一下。

常规表格玩了一下，那这个怎么玩？

table-layout:fixed;

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。

看了概念晕头转向，不知道有什么用。
还是来玩个列子吧。
html

<table class="users">
  <thead>
    <tr>
      <th class="row-1 row-ID">ID</th>
      <th class="row-2 row-name">Name</th>
      <th class="row-3 row-job">Job</th>
      <th class="row-4 row-email">Email<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>Johnny Five</td>
      <td>Robotin'</td>
      <td>need@input.com</td>
    </tr>
    <tr>
      <td>0002</td>
      <td>Super Superlonglastnamesmith</td>
      <td>Doin' stuff</td>
      <td>doing@stuff.com</td>
    </tr>
  </tbody>
</table>

css

.users {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.users td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column widths are based on these cells */
.row-ID {
  width: 10%;
}
.row-name {
  width: 40%;
}
.row-job {
  width: 30%;
}
.row-email {
  width: 20%;
}