Stombi Home Page

Ajouter une CSS pour les tableaux dans Octopress

Modifier head.html

Ajoutez la feuille de style dans source/_includes/custom/head.html

1
<link href="/stylesheets/tables.css" media="screen, projection" rel="stylesheet" type="text/css" />

CSS pour les tableaux

Copiez cette CSS dans source/stylesheets/

(tables.css) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
* + table {
  border-style:solid;
  border-width:1px;
  border-color:#e7e3e7;
  margin-bottom:1em;
  font-size: 0.8em;
  font-family: "Roboto", sans-serif;
}

* + table tr {
  border: 0;
  border-top: 1px solid #CCC;
  background-color: white;
  margin: 0;
  padding: 0;
}

* + table tr:nth-child(2n) {
  background-color: #F8F8F8;
}

* + table tr th, * + table tr td {
  font-size: 1em;
  border: 1px solid #CCC;
  margin: 0;
  padding: 0.4em 1em;
}

* + table tr th {
  font-weight: bold;
  background-color: #F0F0F0;
  text-align:center;
}

* + table th[align="left"], * + table td[align="left"] {
  text-align:left;
}

* + table th[align="right"], * + table td[align="right"] {
  text-align:right;
}

* + table th[align="center"], * + table td[align="center"] {
  text-align:center;
}

Exemple

1
2
3
4
5
Colonne alignée à gauche | Colonne centrée | Colonne alignée à droite
: ---------------------- |:---------------:| ------------------------:
Vert                     | Chien           | Pomme
Jaune                    | Chat            | Poire
Rouge                    | Ours            | Abricot
Colonne alignée à gauche Colonne centrée Colonne alignée à droite
Vert Chien Pomme
Jaune Chat Poire
Rouge Ours Abricot

Comments