前端讲义52_Bootstrap精简表格

最新推荐文章于 2023-04-06 16:10:17 发布

木生火

最新推荐文章于 2023-04-06 16:10:17 发布

阅读量634

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/msh2016/article/details/90347508

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

类------描述
.table 添加基本样式
.table-striped 添加斑马线形式的条纹
.table-bordered 为单元格添加边框
.table-hover 启用鼠标悬停状态
.table-condensed 表格更加紧凑

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap3/bootstrap.min.css">
<script src="bootstrap3/jquery.min.js"></script>
<script src="bootstrap3/bootstrap.min.js"></script>
<style>
th {border-bottom: 1px solid #d6d6d6;}
tr:nth-child(even) {background: #e9e9e9;}
</style>
</head>
<body>
<div data-role="page" id="pg1">
  <div data-role="header">
    <h5>门禁刷卡记录</h5>
  </div>
  
  <div data-role="main" class="table-responsive">
    <table class="table table-condensed">
      <thead>
        <tr>
          <th>EmpID</th>
          <th data-priority="1">EmpName</th>
          <th data-priority="2">IOFlag</th>
          <th data-priority="3">RecTime</th>
          <th data-priority="4">DeviceID</th>
          <th data-priority="5">DevName</th>
		  <th data-priority="6">Sex</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>C10094207</td>
          <td>木生火</td>
          <td>I</td>
          <td>2019-05-14 09:00:06.300</td>
          <td>93014</td>
          <td>園區_1號門員工出入口三輥閘門禁_93014</td>
          <td>男</td>
        </tr>
        <tr>
           <td>C10094207</td>
          <td>木生火</td>
          <td>I</td>
          <td>2019-05-14 09:01:17.397</td>
          <td>92006</td>
          <td>行政樓_1F員工出入口三輥閘門禁_92006</td>
          <td>男</td>
        </tr>
        <tr>
           <td>C10094207</td>
          <td>木生火</td>
          <td>I</td>
          <td>2019-05-14 09:15:07.930</td>
          <td>92098</td>
          <td>行政樓3F_2號電梯門禁_92092</td>
          <td>男</td>
        </tr>
        <tr>
           <td>C10094207</td>
          <td>木生火</td>
          <td>O</td>
          <td>2019-05-14 09:16:09.367</td>
          <td>92012</td>
          <td>行政樓_1F員工出入口三輥閘門禁_92012</td>
          <td>男</td>
        </tr>
		<tr>
           <td>C10094207</td>
          <td>木生火</td>
          <td>N</td>
          <td>2019-05-14 11:41:19.667</td>
          <td>99003</td>
          <td>招募驗證人臉卡機_99003</td>
          <td>男</td>
        </tr>
		<tr>
           <td>C10094207</td>
          <td>木生火</td>
          <td>O</td>
          <td>2019-05-14 12:00:49.543</td>
          <td>93014</td>
          <td>園區_1號門員工出入口三輥閘門禁_93014</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </div>

	<div data-role="footer">
		<h6>Copyright © 日善電腦配件有限公司 2019</h6>
	</div>
</div> 

</body>
</html>

木生火

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端讲义52_Bootstrap精简表格

类------描述.table 添加基本样式.table-striped 添加斑马线形式的条纹.table-bordered 为单元格添加边框.table-hover 启用鼠标悬停状态.table-condensed 表格更加紧凑<!DOCTYPE html><html><head><meta name="viewport" ...
复制链接

扫一扫