欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格） 有大用 有大大用

星期一, 2023-07-17 14:08 — adminshiping1

       在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。

Bootstrap对表格进行了优化，通过给<table>元素应用.table类样式便可以得到一个优化的基本的表
格。

1.基本实例
例:给<table>添加.table类样式，显示优化后的表格。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

结果图：


 

2.表头选项

 例:给表头<thead>添加.thead-light类样式示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table">
  14. <thead class="thead-light">
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

 结果图：

3.条纹状表格

例:给<table>添加.table-striped类样式示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table table-striped">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

结果图：


 

4.带边框的表格

例：给<table>元素添加.table-bordered类样式。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table table-bordered">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

 结果图：

5.无边框的表格

例：给<table>元素添加.table-boardeless类样式。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table table-borderless">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

 结果图：

 6.鼠标指针悬停

例：给<table>元素添加.table-hover类样式示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table table-hover">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr>
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr>
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

结果图：

7.紧凑表格

例：给<table>元素添加.table-sm类样式。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  9. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  10. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <table class="table table-sm">
  15. <thead>
  16. <tr>
  17. <th scope="col">序号</th>
  18. <th scope="col">学号</th>
  19. <th scope="col">姓名</th>
  20. <th scope="col">专业</th>
  21. <th scope="col">课程</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr>
  26. <th scope="row">1</th>
  27. <td>21090401001</td>
  28. <td>李莉</td>
  29. <td>计算机科学与技术</td>
  30. <td>操作系统</td>
  31. </tr>
  32. <tr>
  33. <th scope="row">2</th>
  34. <td>21090401002</td>
  35. <td>张雷</td>
  36. <td>计算机科学与技术</td>
  37. <td>操作系统</td>
  38. </tr>
  39. <tr>
  40. <th scope="row">3</th>
  41. <td>21090401003</td>
  42. <td>周冰</td>
  43. <td>计算机科学与技术</td>
  44. <td>操作系统</td>
  45. </tr>
  46. </tbody>
  47. </table>
  48. </div>
  49. </body>
  50. </html>

 结果图：

8.状态类

       Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。
       状态类设置的是<tr>、<td>或<th>元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。

例：表格背景颜色示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <table class="table">
  14. <thead>
  15. <tr>
  16. <th scope="col">序号</th>
  17. <th scope="col">学号</th>
  18. <th scope="col">姓名</th>
  19. <th scope="col">专业</th>
  20. <th scope="col">课程</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr class="table-success">
  25. <th scope="row">1</th>
  26. <td>21090401001</td>
  27. <td>李莉</td>
  28. <td>计算机科学与技术</td>
  29. <td>操作系统</td>
  30. </tr>
  31. <tr class="table-active">
  32. <th scope="row">2</th>
  33. <td>21090401002</td>
  34. <td>张雷</td>
  35. <td>计算机科学与技术</td>
  36. <td>操作系统</td>
  37. </tr>
  38. <tr class="table-primary">
  39. <th scope="row">3</th>
  40. <td>21090401003</td>
  41. <td>周冰</td>
  42. <td>计算机科学与技术</td>
  43. <td>操作系统</td>
  44. </tr>
  45. <tr class="table-warning">
  46. <th scope="row">4</th>
  47. <td>21090401004</td>
  48. <td>王穗</td>
  49. <td>计算机科学与技术</td>
  50. <td>操作系统</td>
  51. </tr>
  52. <tr class="table-danger">
  53. <th scope="row">5</th>
  54. <td>21090401005</td>
  55. <td>周利</td>
  56. <td>计算机科学与技术</td>
  57. <td>操作系统</td>
  58. </tr>
  59. <tr class="table-info">
  60. <th scope="row">6</th>
  61. <td>21090401006</td>
  62. <td>何琪</td>
  63. <td>计算机科学与技术</td>
  64. <td>操作系统</td>
  65. </tr>
  66. <tr class="table-secondary">
  67. <th scope="row">7</th>
  68. <td>21090401007</td>
  69. <td>付伟</td>
  70. <td>计算机科学与技术</td>
  71. <td>操作系统</td>
  72. </tr>
  73. </tbody>
  74. </table>
  75. </div>
  76. </body>
  77. </html>

结果图：


 9.响应式表格

       通过把任意的table包装在.table-responsive类内，可以创建响应式表格。即当表格水平溢出时出现水平滚动条。

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div class="table-responsive">
  13. <table class="table table-bordered">
  14. <thead>
  15. <tr>
  16. <th>序号</th>
  17. <th>姓名</th>
  18. <th>班级</th>
  19. <th>语文</th>
  20. <th>数学</th>
  21. <th>英语</th>
  22. <th>物理</th>
  23. <th>化学</th>
  24. <th>生物</th>
  25. <th>地理</th>
  26. <th>政治</th>
  27. <th>历史</th>
  28. </tr>
  29. <tbody>
  30. <tr>
  31. <th>1</th>
  32. <th>张三</th>
  33. <th>3班</th>
  34. <th>80</th>
  35. <th>90</th>
  36. <th>92</th>
  37. <th>85</th>
  38. <th>92</th>
  39. <th>80</th>
  40. <th>85</th>
  41. <th>90</th>
  42. <th>85</th>
  43. </tr>
  44. </tbody>
  45. </thead>
  46. </table>
  47. </div>
  48. </body>
  49. </html>

 结果图：

小屏幕效果：

大屏幕效果：


来自  https://blog.csdn.net/m0_69034993/article/details/127703795


https://blog.csdn.net/m0_69034993/article/details/127703795


普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2