Bootstrap Snippet Table UI Design for Portal using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid container-fixed-lg">
   <div class="panel panel-transparent">
      <div class="panel-heading">
         <div class="panel-title">Table Styles for Portal</div>
      </div> 
      <div class="panel-body">
         <div id="tableWithDynamicRows_wrapper" class="dataTables_wrapper">
            <div>
               <table class="table table-striped table-hover table-responsive-block dataTable" id="tableWithDynamicRows">
                  <thead>
                     <tr role="row">
                        <th class="" rowspan="1" colspan="1">App name</th>
                        <th class="" rowspan="1" colspan="1">Description</th>
                        <th class="" rowspan="1" colspan="1">Price</th>
                        <th class="" rowspan="1" colspan="1">Notes</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr role="row" class="odd">
                        <td class="v-align-middle">
                           <p>Angry Birds</p>
                        </td>
                        <td class="v-align-middle">
                           <p>Description goes here</p>
                        </td>
                        <td class="v-align-middle">
                           <p>FREE</p>
                        </td>
                        <td class="v-align-middle">
                           <p>Notes go here Notes go here Notes go here Notes go here</p>                           <p>Notes go here Notes go here Notes go here Notes go here</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    color: #626262;
    background: #f1f1f1;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1;
    padding: 50px;
}
.table tbody tr td, .table thead tr th {
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
    /*padding: 10px;*/
    padding: 20px;
    font-size: 14px;
}
.table tbody tr:hover {
    cursor: pointer;
}
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
    background-color: #eceaf3;
}
.dataTables_wrapper div.dataTables_paginate > ul {
    padding-left: 10px;
}
.dataTables_wrapper div.dataTables_paginate > ul > li > a {
    font-size: 12px;
    color: #626262;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Table UI Design for Portal"
Bootstrap 3.0.0 Snippet by richardbirley

Related: See More

Questions / Comments:

"Table UI Design for Portal" Bootstrap 3.0.0 Snippet by richardbirley

Related: See More

Questions / Comments:

"Table UI Design for Portal"
Bootstrap 3.0.0 Snippet by richardbirley