表格搭配CSS，文字呈現有規律。
對於要處理大量文字，或是大量資料的版型需求而言，這是很好的解決方法。
| 這是標題 |
| 這是內文這是內文。 這是內文這是內文。 這是內文這是內文。 |
| 這是標題 |
| 這是內文這是內文。 這是內文這是內文。 這是內文這是內文。 |
CSS 語法，請放在<body>之後：
<style>
table.tab20141212 {
border-spacing: 2px 0.8em;
word-break: break-all;
border: 0px;
}
/*
這是奇數列的CSS
*/
table.tab20141212 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
border: 0px;
}
/*
這是偶數列的CSS
*/
table.tab20141212 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
}
</style>
table.tab20141212 {
border-spacing: 2px 0.8em;
word-break: break-all;
border: 0px;
}
/*
這是奇數列的CSS
*/
table.tab20141212 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
border: 0px;
}
/*
這是偶數列的CSS
*/
table.tab20141212 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
}
</style>
教 學影音：
互動css語法補充：
在<style>xxx</style>裡面加入下面二條css，則會互動地產生「有規律」的背景顏色：
table.tab20141212 >tbody >tr:nth-child(odd) >td:hover {
background-color: #DEDEBE;
}
table.tab20141212 >tbody >tr:nth-child(even) >td:hover {
background-color: #CAFFFF;
沒有留言:
張貼留言