I am not able to set the table as same as the header. please help and thanks in advance.
code and image are below.enter image description here
<!-- This is the table Style-->
<style>
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
</style>
//this is the HTML code
<div>
<table id="t01">
<tr class="header">
<th>Name</th>
<th>Download</th>
</tr>
<tr class="data_table"></tr>
</table>
</div>
Your html is wrong, use :
<table>
<thead>
<tr class='header'>
<th>Name</th>
<th>Download</th>
</tr>
<thead>
<tbody>
<tr class='data_table'>
</tr>
</tbody>
</table>
Try Following code.
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
<table id="t01">
<tr class="header">
<th colspan="2">Name</th>
<th>Download</th>
</tr>
<tr class="data-table">
<td>Mp3</td>
<td>Download</td>
</tr>
<tr class="data-table">
<td>File</td>
<td>Download</td>
</tr>
</table>
You can use the Bootstrap framework. You may get almost everything for web designing :
Visit
getbootstrap
Example of a Bootstrap table.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
I do not understand how Bootstrap table cells have a width greater than what I set via width, min-width, and max-width styles both in external styles and inline within the table cell. I am setting a width of 150px but the actual width is 218.25px.
table{table-layout:fixed;}
td, th{
width:150px !important;
height:75px !important;
max-width:150px !important;
max-height:75px !important;
min-width:150px !important;
min-height:75px !important;
}
Here's the JSFiddle:
https://jsfiddle.net/QK9sE0/b8on0vzj/14/
A screenshot below illustrates my problem:
Bootstrap sets the table at 100% width, so you need to override that. Here is what I did:
table {
table-layout:fixed;
width: inherit !important;
}
td, th {
width:150px !important;
height:75px !important;
max-width:150px !important;
max-height:75px !important;
min-width:150px !important;
min-height:75px !important;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td style="width:150px; height:75px">Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Once the table starts getting filled it keeps giving me these blank lines on the table.
I am using a w3schools template but I don't think that's whats causing the problem. I put an image below of an example of what it would look like once the table gets filled in.
I tried different things with CSS but nothing worked and I can't find any post with similar problems, please help.
<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<head>
<style>
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
</style>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
top: 40px;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</body>
</html>
Try removing top: 40px; from your css...
I also added a margin-top to the table since it got hidden behind the navigation which uses position:fixed
snippet below:
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
table {
margin-top: 70px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
/* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
</tbody>
</table>
</body>
Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<!-- some rows -->
</tbody>
</table>
To scroll in tbody, I added a scss class .custom-table to table, it looks like this
.custom-table {
tbody {
height: 50px;
overflow-y: auto;
width: 100%;
display: block;
}
}
However, this style does not work correctly. All content in tbody moves to the left. I have a working JSFiddle example.
What did I do wrong?
Please check bellow, I prefer to use flexbox. I also use -webkit and -ms prefixes for more cross browser compatibility
tbody , thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
tr {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
th,td {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
tbody {
height: 50px;
overflow-y: auto;
}
thead {
padding-right: 20px;
}
I set padding-right to thead because of the scrollbar on tbody.
Did you tried to like this?
Change your css like this
.custom-table> tbody {
display:block;
height:50px;
overflow:auto;
}
.custom-table> thead, tbody tr {
display:table;
width:100%;
}
.custom-table> thead {
width: 100%
}
.custom-table {
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
</tbody>
</table>
</div>
Using Udara Kasun's solution, but making the columns lines up:
.custom-table>tbody {
display: block;
height: 50px;
overflow: auto;
}
.custom-table>thead,
tr {
display: block;
width: 100%;
}
.custom-table>thead {
width: 100%
}
.custom-table {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="flex-group-1" style="overflow-y: auto">
<table class="table table-striped table-hover custom-table table-bordered table-responsive ">
<thead>
<tr>
<th width="100">col1</th>
<th width="100">col2</th>
<th width="100">col3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">text1</td>
<td width="100">text2</td>
<td width="100">text3</td>
</tr>
<tr>
<td width="100">text4</td>
<td width="100">text5</td>
<td width="100">text6</td>
</tr>
<tr>
<td width="100">text7</td>
<td width="100">text8</td>
<td width="100">text9</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 5
Table with fixed heading row & vertically scrollable tbody
CSS Only
You have to put the table within a div
HTML:
<!-- Table -->
<div class="container shadow-sm alarm-table">
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
/* Makes table scrollable */
.alarm-table{
height: 150px;
overflow: auto;
}
/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
position: sticky;
top: 0;
}
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 try to have my table like here
I try to put border bottom and top for tr to make my code like in the image. One border works but the other doesn't.
Someone on internet said that it's good to put display block for tr, but if I do that all my text will go left side.
In my code I but red and blue border color to see better.
Can someone tell me how to achieve this?
table {
background-color: #EEEEEE;
margin-top: 40px;
}
table tr {
/*display: block;*/
border-top: 2px solid red;
border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>
There is default styling in Bootstrap that you need to override, either with increased specificity or !important.
The code is
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
Then you need to override the border-collapse property
table {
background-color: #EEEEEE;
margin-top: 40px;
border-collapse: separate !important;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143 vertical-align: top;
border-top: 4px solid green !important;
border-bottom: 4px solid red !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
I have updated your code. The output will give you top border color as red and bottom border color as blue.
table {
background-color: #EEEEEE;
margin-top: 40px;
}
tr:nth-child(even){
/*display: block;*/
border-top: 2px solid red;
/*background-color: #CC9999;*/
}
tr:nth-child(odd){
/*display: block;*/
border-top: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>