table 表格，細邊框設置，禁止內容換行設置，斑馬線設置

1.沒有設置時的樣式

2.設置后的樣式

?

?3.html代碼

<div class="cp-table"><table border="1"><thead><tr><th>姓名</th><th>電話</th><th>簽到時間</th><th>狀態</th></tr></thead><tbody><tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td></tr> <tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td></tr> <tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td> </tr> <tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td> </tr> <tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td> </tr> <tr><td>cplvfx</td><td>15100001111</td><td>2022-08-24 18:16</td><td><span class="txt-primary">已報名</span></td> </tr> </tbody></table> </div>

4.CSS代碼

.txt-default{color: #333333; } .txt-default2{color: #717171; } .txt-primary {color: #07c160; }.txt-info {color: #1989fa; }.txt-danger {color: #ee0a24; }.txt-warning {color: #ff976a; }.cp-table{width: 100%;margin-top:20px;overflow-y:hidden;overflow-x:scroll; } .cp-table table{min-width: 100%;border-collapse: collapse; /* 表格邊框合并 ，合并后顯示細線邊框*/} table, thead,tr, td, th {border: 1px solid #E2E2E2; /* 表格邊框顏色 */ } .cp-table table thead{background-color: #F2F2F2;/* 表頭背景顏色 */ } .cp-table table th,.cp-table table td{min-width: 100px;min-height: 36px;line-height: 36px;text-align: center;/* 內容居中顯示 */padding: 0px 10px;/* 內容左右間距 */word-break: keep-all;/* 禁止表格內容換行 */white-space: nowrap;/* 禁止表格內容換行 */ } .cp-table table tr:nth-child(even) {background: #f1f1f1;/* 表格斑馬線 */ }.cp-table table tr:hover {background: #f9f9f9;/* 表格斑馬線 */ }

總結

以上是生活随笔為你收集整理的table 表格，table表格细边框设置，table表格禁止内容换行设置，table表格斑马线设置的全部內容，希望文章能夠幫你解決所遇到的問題。

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