#6 CSS Table x Stock Price

An ordinary CSS table looks like

https://ithelp.ithome.com.tw/upload/images/20210906/201303624OrOKKKqfX.png


Ways of making CSS table beautiful

1. Change the two-line border into a single solid line by border-collapse:collapse

table{
	width:500px;
	border-collapse:collapse;
}

https://ithelp.ithome.com.tw/upload/images/20210906/20130362J660aWCK8j.png

2. Color the first pair of tr child by tr:nth-child(1)

tr:nth-child(1){
	background-color:#5B92E6;color:#ffffff;
}

https://ithelp.ithome.com.tw/upload/images/20210906/20130362i1iTOaYApz.png

3. Color the even tr by tr:nth-child(even)

tr:nth-child(even){
	background-color:#e8e8e8;
}

https://ithelp.ithome.com.tw/upload/images/20210906/20130362xZMTApqye3.png


Final Design

https://ithelp.ithome.com.tw/upload/images/20210906/20130362ZN7mlrjeRp.png


Music of Today: Till Forever Falls Apart by Ashe & FINNEAS


Like/Share/Follow

If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif
Feel free to comment and share your ideas below to learn together!


<<:  DAY6 MongoDB 资料新增(Insert) 与删除(Delete)

>>:  [Day5]C# 鸡础观念- 让变数学会七十二变的高手~运算子

30天学会Python: Day 8-维度展开 二维容器

用容器装非容器的资料(整数、浮点数、布林)是一维的概念,可以想成是数学中的数列,或是前面举例的火车 ...

【Day 5】逻辑时间与广播

分散式系统之间不只是 unicast,更多的是有 multicast 的需求, 因此这章将介绍广播。...

从零开始的8-bit迷宫探险【Level 29】让你的 App 与众不同!设计 Icon 及 LaunchScreen

回到村子後,山姆变成了斜杠青年,他将探险的故事写成了一本书。 书的封面印着山姆的肖像。 而书名就叫...

DAY 8 - 瓦斯弹

今天继续来练习阴影~ 因为要方便练习~ 所以选一个简单的圆形怪物 我就选了瓦斯弹~ 用他来练习阴影 ...

Adaptor 转接器模式

今天开始要介绍 Structural patterns。先前的 Creational pattern...