本文分享了一个使用纯CSS实现的表格布局案例，展示了不同类型的表格设计，包括员工信息、电影分类、公司季度表现等，适用于网页设计及前端开发人员参考。
下载： http://pan.baidu.com/s/1kUcJEZX
或者Git: https://git.oschina.net/paincupid/express-css-table-design.git
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug's Life |
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug's Life |
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug's Life |
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| The above data were fictional and made up, please do not sue me | ||||
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
| FAVORITE | GREAT | NICE | BAD |
|---|---|---|---|
| Passion of the Christ | Bourne Ultimatum | Shoot 'Em Up | Ali |
| The Big Fish | The Mummy | Apocalypto | Monster |
| Shawshank Redemption | Cold Mountain | Indiana Jones | Dead or Alive |
| Greatest Story Ever Told | I Am Legend | Star Wars | Saw 3 |
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| The above data were fictional and made up, please do not sue me | ||||
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
| Employee | Division | Suggestions | |
|---|---|---|---|
| IE 6 users won't see the transparent background if the hack is not applied | |||
| Stephen C. Cox | Marketing | Make discount offers | |
| Josephin Tan | Advertising | Give bonuses | |
| Joyce Ming | Marketing | New designs | |
| James A. Pentel | Marketing | Better Packaging | |
| Employee | Division | Suggestions | Rating |
|---|---|---|---|
| Give background color to the table cells to achieve seamless transition | |||
| Stephen C. Cox | Marketing | Make discount offers | 3/10 |
| Josephin Tan | Advertising | Give bonuses | 5/10 |
| Joyce Ming | Marketing | New designs | 8/10 |
| James A. Pentel | Marketing | Better Packaging | 8/10 |
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Nation | Capital | Language | Unique |
|---|---|---|---|
| Japan | Tokyo | Japanese | Karate |
| South Korea | Seoul | Korean | Ginseng |
| China | Beijing | Mandarin | Kung-Fu |
| Indonesia | Jakarta | Indonesian | Batik |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
