CSS相关表格设置

Posted on | In |

最近使用的hexo来重新部署我的博客。在hexo-theme中设置页面布局使用css。找到hexo-theme/source/css中使用的主题css。

css Table设置

在html中一个表格包含：<table>元素，一个或多个<tr> <th> <td>元素。其中<tr>元素定义表格行，<th>元素定义表头，<td>元素定义表单元格。
更复杂的html表格可能包含<caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

表格边框

采用黑色边框，颜色可以使用rgb。#000000表示黑色

1
2
3
4
table, th, td
{
    border: 1px solid black; 
}

注意上边的例子中有双边框，因为table和th/td有独立的边界。为了使用一个表的单个边框，使用border-collapse属性

折叠边框

collapse设置表格的边框是否被折叠成一个单一的边框。

1
2
3
4
5
6
7
8
table
{
    border-collapse:collapse;
}
table, th, td
{
    border: 1px solid black;
}

表格宽度和高度

1
2
3
4
5
6
7
8
table 
{
    width:100%;
}
th
{
    height:50px;
}

当然还有最小宽度min-width等。

表格文字对齐

text-align属性设置水平对齐方式，向左，右，或中心:

1
2
3
4
td
{
    text-align:right;
}

垂直对齐属性设置垂直对齐，比如顶部，底部或中间:

1
2
3
4
5
td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

控制表格中内容和边框之间的距离

1
2
3
4
td
{
    padding:15px;
}

表格颜色

1
2
3
4
5
6
7
8
9
table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

我设置的表格

  1. css局部定义属性(沿用了我使用的主题).post-content, 使用后代元素选择器和子元素选择器
    • 后代选择器又称为包含选择器，后代选择器可以选择作为某元素后代的元素。比如.post-content table{}就是对在post-content中table的元素全部使用这个。
    • 子元素选择器，不想使用任意后代元素，只想选择某个元素的子元素.post-content > table。也就是table元素必须是.post-content的直接子元素才可以。
  2. 每行颜色不同
  3. 取消每个单元格内容缩进 text-indent
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .post-content {
      line-height: 20px;
      font-size: 14px;
      text-indent: 0; /*表格缩进*/
      color: #333333;
      font-weight: 300;
    }
    .post-content > table,
    .post-content > table tr th,
    .post-content > table tr td { /*单元格*/
      border: 1px solid #000000;
      padding: 4px;
      min-width: 50px;
    }
    .post-content table {
      border-collapse: collapse;
    }
    .post-content table tr:nth-child(odd){ /*表行设置奇数行颜色不同*/
      background: #ddd;
    }
    .post-content table th{ /*表头行*/
      background: #fff;
    }