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

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;/* 表格斑馬線 */
}