I am making a table using bootstrap 3.3.7, in this I am using Fixed header for that I am giving Position:static, but it is not working in IE, please suggest any alternate way.
here is my working…
.tableStyle {
overflow-y: auto;
height: 400px;
border: 1px solid #ccc;
}
.tableStyle thead th {
position: sticky;
top: 0;
}
.tableStyle thead th {
background: #f1f1f1;
color: #333;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive tableStyle">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>3</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sidebar_menu.js"></script>
</body>
</html>
please tell any alternate way how I can handle it in IE browser.
.tableStyle thead th {
position: sticky;
top: 0;
}
instead of the position:sticky you just use position: fixed. it will work in chrome, Mozilla not works in IE-7. i'm just correcting your code here.
Related
in this code ,I set a style for border of thead element , but my problem is that the border doesn't display in the browser at all.
what should i do?,please help me.thank you.
thead {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
You cant actually add a border to the thead Element as that element exists but has no "physical representation" when beign rendered. thead and tbody are semantical only elements but you cant actually style them properly.
Id recommend moving the border to the tr childs of your thead and configure your tables border-collapse behaviour instead:
table {
border-collapse: collapse;
}
table thead tr th {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
how do i move all my styling in html to css? When i copy and paste it, it's not working properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
td,
th {
border-bottom: 1px solid #c4dcf3;
border-collapse: collapse;
padding: 5px;
}
tfoot {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #eef7ff;
}
</style>
</head>
<body>
<table>
<thead style="background-color: #427fef;">
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: #427fef;">
<th>Total</th>
<th align="center" colspan="2">$5,000</th>
</tr>
</tfoot>
</table>
</body>
</html>
i just link .css file within header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyles.css">
<title>Document</title>
</head>
<body>
<table>
<thead style="background-color: #427fef;">
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: #427fef;">
<th>Total</th>
<th align="center" colspan="2">$5,000</th>
</tr>
</tfoot>
</table>
</body>
</html>
and your mystyles.css is like
table,
td,
th {
border-bottom: 1px solid #c4dcf3;
border-collapse: collapse;
padding: 5px;
}
tfoot {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #eef7ff;
}
I have a bootstrap table with overflow scroll (.table-responsive). Its working fine but i want to remove scroller from bottom. how can i remove it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" style="width:1500px;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
</script>
</body>
</html>
Is it because your table is wider than it's container. Either you remove the inline style with 1500px or give overflow-x: hidden; to the container which will disable the horizontal scrolling, but your table's width will be the same and a big part of it will be invisible
If you want to keep the horizontal scrolling, but want to hide the scrollbar, then you should try this:
div::-webkit-scrollbar{
display: none;
}
NOTE: it works only in webkit based browsers
Using Bootstrap-4 I am not able to apply scroll for table body with fixed header.
I am using min-height as well as overflow for applying scroll to table body.
Does bootstrap4 doesn't support scroll on table body?
Below snippet explains the problem more clearly.
Am I going wrong somewhere?
.tbody {
min-height:10px;
overflow-y:scroll;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
After setting display:block property to table you can set height and widths.
Try this:
table {
display:block;
height : <set your desired height>;
overflow-y : scroll;
}
I hope this is what you were looking for
.tbody {
height: 50px !important;
overflow-y: scroll;
}
.my-tbody {
height:30px;
display:block;
overflow-y:scroll;
width:100%;
}
tbody {
width: 100%;
}
tr {
width: 100%;
}
td {
width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<table class="my-tbody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<div class="cl"></div>
</table>
</table>
</div>
or you can use this .
.tbody {
height: 50px !important;
overflow-y: scroll;
}
.my-tbody {
height:50px;
display:block;
overflow-y:scroll;
width:100%;
}
tbody {
width: 100%;
}
tr {
width: 100%;
}
td {
width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<table class="my-tbody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<div class="cl"></div>
</table>
</table>
</div>
I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>
You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview