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>
Related
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;
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 am working on a project in which I have to make a webpage. I have a table and when I run the code, the center cell is longer than the other cells.
table,td,tr{border: 1px solid red; }
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th>ali</th><th>mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>
You can add the following code to the existing code:
<table style="table-layout: fixed ;width: 100% ;">
<td style="width: 25% ;">
In addition to ensuring the header matches the number of columns via colspan you can fix the width by a percentage or a specific size using the td CSS class.
table,td,tr{border: 1px solid red; }
td
{
width: 100px;
}
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th colspan="3">ali mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>
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
I'm trying to make a page navigation as portable as possible. I'm using Chrome 58 and the page is displayed as expected: the iframe is resized according to the td container, but is not working in IE and firefox which displays the iframe in the middle of the cell. Here is my code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="language" content="ES">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" type="text/css" rel="stylesheet">
<script src="js.js" type="text/javascript" charset="UTF-8"></script>
<title>Mi sitio</title>
</head>
<body>
<table id="navUI">
<tr>
<td id="navHeader" colspan="2">Tema general</td>
</tr>
<tr>
<td id="MenuHeader">Menú</td>
<td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td>
</tr>
<tr>
<td class="spander"> </td>
</tr>
</table>
</body>
</html>
CSS:
#charset "utf-8";
html, body, table {
padding:0;
margin:0;
height:100%;
width:100%;
}
body {
font:12px Verdana, Arial, Sans-serif;
}
table#navUI, td {
border:1px solid black;
}
td#navHeader {
text-align:center;
height:30px;
}
td#MenuHeader {
width:10%;
text-align:center;
}
td.MenuItems {
width:10%;
}
td.MenuItems:hover {
background-color:#BDBEE1;
cursor:pointer;
}
td.spander {
width:10%;
height:100%;
}
#navField {
border:none;
height:100%;
width:100%;
}
The idea is to keep pure html and css without jquery. Thanks for the help.
Add this to the td which contains the iframe:
vertical-align:top;height:100%;
Here's a fiddle which works in Firefox:
https://jsfiddle.net/3urm8kx8/1/