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
Related
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.
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
I am using bootstrap3 for my table.
I need Login button in to be last column of the table.
I really need it to be in bootstrap only.
<!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/1.12.4/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>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td rowspan='3'><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried but couldn't solve it.
Please help me.
<!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">
<style>
.table > tbody > tr > td {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Might be you want this. If it is not, please elaborate where you exactly want the button.
<!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/1.12.4/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>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td><button class="btn btn-primary">Login</button> </td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
<td><td>
</tr>
</tbody>
</table>
</div>
try this code
<!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/1.12.4/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>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
i have table with three cols that uses bootstrap class "table table-striped". But i want first columns to be 100px in length second 400px and 3rd 200px. How do i do this with bootstrapped tables?
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th style="width:100px !important;">Firstname</th>
<th style="width:400px !important;">Lastname</th>
<th style="width:200px !important;">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>
</body>
</html>
you could give it another class like so "table table-width-100 table-striped"
and give the table-width-100 class the new width like so:
.table-width-100 { width: 100px; !important }
where !important overrides the default bootstrap css, but there might be a cleaner solution.
You can simply set width attribute to table headers for example <th style="width: 500px">
The way I would approach this is as follows:
Add a custom class to the <table>, so <table class="table table-striped custom"> for example. This ensures you don't overwrite BootStrap's native styling.
Use the nth-child selector to programmatically select the 1st, 2nd and 3rd <td>'s in all rows, thus eliminating the need to add a different style to each <td>:
https://jsfiddle.net/gcxfxyx3/
The CSS for this particular case is:
.custom td:nth-child(2) {
width: 100px;
}
.custom td:nth-child(3) {
width: 400px;
}
.custom td:nth-child(4) {
width: 200px;
}
I have a HTML page that consists of two tables. On small devices, I want those tables to stack vertically. On Desktop, I want them to appear next to each other. Here's my Page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>th is 0</th>
<th>th is 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell is row 0, column 0</td>
<td>cell is row 0, column 1</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>th is 0</th>
<th>th is 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell is row 0, column 0</td>
<td>cell is row 0, column 1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
My problem is that the tables are always aligned vertically, even on desktop. How can I achieve the desired behaviour?