<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
<!-- <style>
8.
.table-sm th, .table-sm td{
padding: 0.2rem;
}
</style> -->
<style>
th{
min-width: 200px;
}
</style>
<!-- 9.响应式表格 ：table-responsive -->
<!-- 没有响应式的样式表格，它们会超出屏幕，会用浏览器的公用的左右导航条 -->
<!-- 有响应式的，它会自动生成一个自己的导航条 -->
<!-- table-responsive它有4个参数
它根据bootstrap设计的屏幕尺寸，设置了4个参数
table-responsive-sm < 576px
table-responsive-md < 768px
table-responsive-lg < 992px
table-responsive-xl < 1200px
当尺寸没有小于上面的值时，它不会出现导航条
-->
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
<table class="table table-striped table-bordered table-hover table-responsive">
<thead class="thead-light">
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="table-success">
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-primary">
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>4</th>
<th>小美</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
<th>4</th>
<th>小美</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-warning">
<th>5</th>
<th>小卡</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
<th>5</th>
<th>小卡</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<!-- 8.表格大小 -->
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-light">
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="table-success">
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-primary">
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>4</th>
<th>小美</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-warning">
<th>5</th>
<th>小卡</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<!-- 7.每行改变颜色 -->
<!-- table-primary蓝色 -->
<!-- table-success绿色 -->
<!-- table-danger红色 -->
<!-- table-info天蓝色 -->
<!-- table-warning橙色 -->
<!-- table-active灰色 -->
<!-- table-seconday灰色 -->
<!-- table-ligeht白色 -->
<!-- table-dark灰色，白色字体 -->
<table class="table table-striped table-bordered table-hover ">
<thead class="thead-light">
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="table-success">
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-primary">
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>4</th>
<th>小美</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-warning">
<th>5</th>
<th>小卡</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered table-hover">
<thead class="thead-light">
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="table-success">
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-primary">
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>4</th>
<th>小美</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr class="table-warning">
<th>5</th>
<th>小卡</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<!-- 6.表头颜色：thead-dark深色 thead-light浅色 -->
<table class="table table-striped table-bordered table-hover鼠标悬停状态">
<thead class="thead-light">
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<!-- 写好的样式都是class，但是还有js参与操作的，它会用到data1- -->
<!-- 1.table表格样式 -->
<!-- 2.table-dark背景深色 -->
<!-- 3.table-striped斑马条纹 -->
<!-- 4.table-bordered边框 -->
<!-- 5.table-hover鼠标悬停状态 -->
<table class="table table-striped table-bordered table-hover ">
<thead>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
<table style="color:blueviolet;width: 1200px;">
<thead>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<th>1</th>
<th>小明</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>2</th>
<th>小红</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
<tr>
<th>3</th>
<th>小绿</th>
<th>123456qq.coom</th>
<th>123456</th>
<th>安徽</th>
<th>合肥</th>
<th>8</th>
</tr>
</tbody>
</table>
</html>
</body>
</html>
