I have a bootstrap table that contains a form-inline in a certain column. And this caused the contents in other columns not vertically center aligned. (As seen in the 1st code snippet) How to avoid this situation?
Actually, if I remove that form-inline from the table, everything works fine. (As seen in the 2nd code snippet) So I guess the problem comes from the form-inline embedded into the table.
/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
<td>
<form class="form-inline justify-content-center">
<button type="submit" class="btn btn-danger" name="TSLA" value="Sell">
<i class="fas fa-minus-circle"></i>
</button>
<input type="number" name="quantity" class="form-control" value="1" min="1" max="100" style="width:70px">
<button type="submit" class="btn btn-primary" name="TSLA" value="Buy">
<i class="fas fa-plus-circle"></i>
</button>
</form>
</td>
</tr>
</table>
</body>
</html>
/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
</tr>
</table>
</body>
</html>
In your code, there is a style by default, which prevents your table to be vertically in the middle.
Here it is:
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
so you can override this:
vertical-align: middle;
Related
I have created the following page, to inform users that their browser is outdated.
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem is that the page does not show properly in Internet Explorer, as shown below:
Is there any other way to center the footer button?
Give it a parent div and set the button as display: block; and center it using margin: 0 auto;
I think this only needs to adjust the position of the <a> element in the modal-footer through the translateX attribute, like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
table {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
}
img {
width: 32px;
height: auto;
}
.modal-footer a {
transform: translateX(-50%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function () {
$('#outdatedBrowserModal').modal('show');
});
</script>
</head>
And this is result in IE:
You can use the transform property to center it, if you give the element any position but static (I used relative in this case).
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
.modal-footer {
position: relative;
left: 50%;
transform: translateX(-50%);
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To make this come in center u can bound it by center tag like this:
<center>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</center>
This shall work in every browser
I have to create a datatable with the search box in my web page.
I'm using the datatable library but I don't understand why the search box doesn't appear.
This is my code:
<head>
<meta charset = "utf-8">
<title>Prescriptions</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container mb-3 mt-3">
<table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giulio</td>
<td>1998</td>
</tr>
<tr>
<td>Riccardo</td>
<td>2000</td>
</tr>
<tr>
<td>Eleonora</td>
<td>1997</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</tfoot>
</table>
</div>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
$('#mydatatable').dataTable( {
"searching": true
} );
</script>
</body>
I've add "searching": true but when I run the code there is no search box.
What I need to do?
Thanks!
Here i have done some code for you,You can check this and i hope this will help you to learn data table in more accurate way.
Thanks
$('#mydatatable').dataTable({
"searching": true
});
div.dataTables_wrapper div.dataTables_filter input {
margin-left: 0.5em;
display: inline-block;
width: auto;
border-radius: 20px;
}
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
border-radius: 20px;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
background: #efe7dc80;
padding: 30px;
}
th {
background-color: white;
}
tr:nth-child(odd) {
background-color: wheat;
}
th,
td {
padding: 0.5rem;
border: solid 1px;
}
td:hover {
background-color: lightsalmon;
}
.paginate_button {
border-radius: 0 !important;
}
.body-content {
margin-top: 10%;
}
#table-container {
background: #f4f4f49e;
padding: 5%;
border-radius: 10px;
}
td {
border: none;
}
th {
border: none;
background-color: #5f81a5;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<title>Prescriptions</title>
</head>
<body>
<div class="table-container">
<div class="container mb-3 mt-3">
<table class="table table-striped table-bordered" style="width: 100%" id="mydatatable">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giulio</td>
<td>1998</td>
</tr>
<tr>
<td>Riccardo</td>
<td>2000</td>
</tr>
<tr>
<td>Eleonora</td>
<td>1997</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.jqueryui.min.css" />
</body>
</html>
You are missing jquery and Datatable Script Import as well
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script scr="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script scr="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script scr="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
Sorting should be like this
Order matters in script importing, and jquery script import is missing
Update
Based on jme11 answer the d-flex is preventing the alignment, however without d-flex the columns are totally messed up (using bootstrap 4)
To reporoduce: (first row should be aligned middle, but it is not)
http://jsbin.com/fafoweleka/1/edit?html,css,output
Context
I would like to align my text in a bootstrap 4 table. I am trying to use vertical-align:middle, but text is still aligned to top.
Question
What am I missing?
Markup:
<table class="table">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4" style="vertical-align:middle">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"></td>
</tr>
</table>
Result:
EDIT
If you want to use the d-flex class on the tr elements to allow for use of the col classes on the cells, you can align the text in a specific cell vertically by adding d-flex and align-items-center class to that cell.
.strecher {
height: 200px;
}
.my-table td {
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<h3>For a specific cell:</h3>
<table class="table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4 d-flex align-items-center">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
<h3>For all cells:</h3>
<table class="table my-table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
</body>
</html>
Is it possible to autosize a column by its header size which includes a glyphicon right aligned?
E.g.:
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
And the style:
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
Pushes the glyphicon to the second column.
Full code:
<!doctype html>
<html>
<head>
<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>
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table table-bordered" style="width: 1px;">
<thead>
<tr>
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
</tr>
</thead>
</table>
</body>
</html>
Gee always the way you spend hours changing css to see what works and by posting here I had the light turned on, all I had to do is remove the pull-right class out of the glyphicon
I am using the following code. How to put this table in the center of the page using CSS?
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Main Page</title>
</head>
<body>
<table>
<tr>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
</tr>
</table>
</body>
</html>
Edit for 2022: Flexbox Please
Use Flexbox, instructions here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
.box {
background-color: red;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
width: 400px;
}
.box div {
background-color: blue;
width: 100px;
height: 100px;
}
<div class="box">
<div></div>
</div>
2021 answer preserved below.
html, body {
width: 100%;
}
table {
margin: 0 auto;
}
Example JSFiddle
Vertically aligning block elements is not the most trivial thing to do. Some methods below.
Understanding vertical-align, or "How (Not) To Vertically Center Content"
Vertical Centering in CSS
You can try using the following CSS:
table {
margin: 0 auto;
}
1) Setting horizontal alignment to auto in CSS
margin-left: auto;
margin-right: auto;
2) Get vertical alignment to centre of the page add following to css
html, body {
width: 100%;
}
For example :
<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
table.center {
margin-left: auto;
margin-right: auto;
}
html, body {
width: 100%;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
<tr>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
<tr>
<th>SNO</th>
<th>Address</th>
</tr>
<tr>
<td>1</td>
<td>yazali</td>
</tr>
</table>
</body>
</html>
If you where asking about the table to complete center, like some thing in total center.,
you can apply the following code.
margin: 0px auto;
margin-top: 13%;
this code in css will let you put your table like floating.
Tell me if it helps you out.
You can use "display: flex;".
body{
margin: 0;
height: 100vh;
width: 100vw;
display: flex; /* WIDTH and HEIGHT are required*/
justify-content: center;
align-items: center;
}
<!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>Table</title>
</head>
<body>
<table border>
<tr>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
</tr>
</table>
</body>
</html>
simply put it in the div then control that div whit css:
<div class="your_position">
<table>
</table>
</div>