Issue
I'm trying to center table vertically and horizontally via flexbox
.
One "screen" - one table in the middle, scrolling, - yet another table in the middle.
But via this code doesn't work:
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
min-height : 100vh;
}
<body>
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
</body>
Where I'm wrong?
Solution
If to have the table
's each centered per full screen/viewport, to scroll between the 2 tables, check sample 1 below, where I moved all properties from the body
rule to the .wrapper
rule.
If you intended to have the 2 table
's on top of each other, check sample 2 below, which have flex-direction: column
set.
To center the table
's side-by-side, remove min-height: 100vh
from the wrapper
rule, sample 3.
Sample 1 - one per full screen/viewport
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
.wrapper {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 2 - on top of each other
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 3 - side-by-side
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Answered By - Asons
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.