bootstrap带管理后台菜单的表格table代码-html代码-BFW代码库

代码语言：html

所属分类：表格

代码描述：bootstrap带管理后台菜单的表格table代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.0.0-alpha.6.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
left-hamberger { margin:12px 10px;}
.btn {  cursor:pointer; }
.sortable { color:#428bca; cursor:pointer; } 
.disabled-btn { opacity:0.4; }

.search-fld-cont { max-width:650px; margin:0 auto; }
.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; } 


.wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper.toggled {
    padding-left: 250px;
}
		.sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper.toggled .sidebar-wrapper {
    width: 250px;
}

.page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

.wrapper.toggled .page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-icon { display:inline; margin-right:10px; }
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover, .sidebar-nav li .active  {  
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    .wrapper {
        padding-left: 250px;
    }

    .wrapper.toggled {
        padding-left: 0;
    }

    .sidebar-wrapper {
        width: 250px;
    }

    .wrapper.toggled .sidebar-wrapper {
        width: 0;
    }

    .page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    .wrapper.toggled .page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
	
}

.hamburger-btn { position:absolute; margin:15px 0; left:15px; cursor:pointer; width:58px; height:43px; }
.profile-pic { position:absolute; margin:15px 0; right:15px; cursor:pointer; }
.content {margin-bottom:25px; padding:0 16px;}
.page-title { font-size:18px; margin:0 auto; margin-top:20px; margin-bottom:25px; text-align:center; }

@media(max-width:360px) {
	 .wrapper.toggled .profile-pic  { display:none; }
	 .wrapper.toggled .page-title { visibility:hidden; }
	.header { height:72px; }
}
.del-icon { margin-right:10px; }
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
</head>

<body translate="no">
  <div class="wrapper">
 <div class="sidebar-wrapper">
            <ul class="sidebar-nav" >
                <li class="sidebar-brand">
                    <a href="#">
                        Demo
                    </a>
                </li>
                <li>
                   <a href="#"> <i class="fa fa-th sidebar-icon"></i>  App center</a>
                </li>
                <li>
                    <a href="#">  <i class="fa fa-calendar-check-o sidebar-icon"></i> Intervention</a>
                </li>
				<li>
                    <a href="#"> <i class="fa fa-truck sidebar-icon"></i> Delivery</a>
                </li>
               <li>
                    <a href="#"><i class="fa fa-calendar-plus-o sidebar-icon"></i> Appointment</a>
                </li>
				<li>
                    <a href="#"><i class="fa fa-users sidebar-icon"></i> Customers</a>
                </li>
				<li>
                    <a href="#"><a href="#"><i class="fa fa-file sidebar-icon"></i> Accounting</a>
                </li>
				<li>
                    <a href="#"><i class="fa fa-bell sidebar-icon"></i> Reminders</a>
                </li>
				<li>
                    <a href="#"><i class="fa fa-user sidebar-icon"></i> Users</a>
                </li>
            </ul>
        </div>
<div>

 <header class="header navbar-light bg-faded">
	<div class="container-fluid">
		<div class="row text-center">
			  <button type="button" class="btn hamburger-btn" id="menu-toggle">
				<span class="navbar-toggler-icon"></span>
			  </button>
			  <span class="page-title">Table List</span>
			  <div class="profile-pic">
			   
			  </div>
		</div> <!-- ENd of row -->
	</div> <!-- End of container fluid -->
</header>

	
  
	<div class="page-content-wrapper">
     <div class="container-fluid">
			
			<div class="row">
				<div class="col-sm-12">
					
					<button type="button" class="btn btn-success" style="float:right;">+ New</button>
				</div> <!-- End of column -->
			</div> <!-- End of row -->
			
			<!-- Start of filter block -->
			<div class="row filter-block">
				<div class="col-6 col-md-3">
					<div class="form-group">
						<label for="priority">Priority</label>
						<input type="text" class="form-control" name="priority" id="priority" placeholder="">
					</div> 
				</div>
				<div class="col-6 col-md-3">
					<div class="form-group">
						<label for="type">Type</label>
						<input type="text" class="form-control" name="type" id="type" placeholder="">
					</div>
				</div>
				<div class="col-6 col-md-3">
					<div class="form-group">
						<label for="type">Assigned to</label>
						<input type="text" class="form-control" name="assigned" id="assigned" placeholder="">
					</div>
				</div>
				<div class="col-6 col-md-3">
					<div class="form-group">
						<label for="type">Status</label>
						<input type="text" class="form-control" name="status" id="status" placeholder="">
					</div>
				</div>
			</div> <!-- End of row -->
		<!-- End of filter block -->
		<button _ngcontent-udn-32="" class="btn btn-secondary tab-nav-btn disabled-btn" type="button" disabled><i _ngcontent-udn-32="" class="fa fa-chevron-left"></i></button>
		<button _ngcontent-udn-32="" class="btn btn-secondary tab-nav-btn" type="button"><i _ngcontent-udn-32="" class="fa fa-chevron-right"></i></button>
		<br /> <br />
		
		<!-- Listing table -->
			<div class="row">
				<div class="col-sm-12">
					<div class="cust-table-cont">
					<div class="table-responsive">
					  <table border="0" class="table cust-table"> 
						<thead>
							<tr style="">
							  <th style="width:80px;">#</th> 
							  <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
							  <th style="width:250px;">Title</th>  
							  <th style="width:200px;">Company</th> 
							  <th style="width:100px;">Priority</th&.........完整代码请登录后点击上方下载按钮下载查看