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;/* 表格斑马线 */
}