當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

一个好看的CSS样式表格

發布時間：2023/12/10 CSS 22 豆豆

生活随笔收集整理的這篇文章主要介紹了一个好看的CSS样式表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一個好看的CSS樣式表格

自動換整行顏色的CSS樣式表格（需要用到JS）
- 自動換整行顏色的CSS樣式表格
- 源代碼

自動換整行顏色的CSS樣式表格（需要用到JS）

這個CSS表格會自動切換每一行的顏色，這種呈現方式，在我們編輯一個數據龐大的表格時，非常好用。

自動換整行顏色的CSS樣式表格

鏈接: html好看的CSS表格.

圖片:
當然，我們為了讓用戶更加便捷，我們增加了圖片拖拽功能。

源代碼

表格的樣式.

<table class="altrowstable" id="alternatecolor"><tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></tr><tr><td>Text 3A</td><td>Text 3B</td><td>Text 3C</td></tr><tr><td>Text 4A</td><td>Text 4B</td><td>Text 4C</td></tr><tr><td>Text 5A</td><td>Text 5B</td><td>Text 5C</td></tr> </table>

CSS的樣式

table.altrowstable {font-family: verdana, arial, sans-serif;font-size: 11px;color: #131313;border-width: 10px;border-color: #ad9a2f;border-collapse: collapse; }table.altrowstable th {border-width: 2px;padding: 16px;border-style: solid;border-color: #5d6fbe; }table.altrowstable td {border-width: 2px;padding: 8px;border-style: solid;border-color: #911b0f; }.oddrowcolor {background-color: #116975; }.evenrowcolor {background-color: #a5a9a6; }  function altRows(id) {if (document.getElementsByTagName) {const table = document.getElementById(id);const rows = table.getElementsByTagName("tr");for (let i = 0; i < rows.length; i++) {if (i % 2 == 0) {rows[i].className = "evenrowcolor";} else {rows[i].className = "oddrowcolor";}}} }window.onload = function () {altRows('alternatecolor'); }

頭部元素

<head><meta charset="UTF-8"><title>好看的表格</title><script type="text/javascript" src="javascript.js"></script><link type="text/css" href="style.css" rel="stylesheet"/> </head>

一個很漂亮的表格樣式希望對你有所幫助！

文章參考
https://www.w3school.com.cn/
https://developer.huaweiuniversity.com/

總結

以上是生活随笔為你收集整理的一个好看的CSS样式表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。