this the image I'm trying to recreate
I'm trying to place the two(2) stacked images right next to each other and also make the whole three(3) images to also align right next to the sidebar tables like in the above image, but each time I try it always goes below the sidebar table. I have tried using flexbox but it doesn't work maybe I don't know it very much. please if anyone can help. Thank you
<div class="table">
<table>
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
CSS Code
.table {
display: flex;
flex - flow: column;
border: 1px solid #999696;
width: 25%;
height: 60%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
display: flex;
justify-content: center;
align-items: center;
}
.lone-image{
background-image: url(xii.jpg);
background-size: cover;
width: 35%;
height: 410px;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 400px;
width: 40%;
margin: 4px;
}
.canon{
background-size: cover;
background-image: url(canon.jpg);
width: 65%;
height: 400px;
margin-bottom: 4px;
}
.dell{
background-size: cover;
background-image: url(dell.jpg);
width: 65%;
height: 400px;
}
I came up with this.
You can play around with width's and other styling but this should give you the basic idea.
Also, using tables is a bad practice as they offer no responsiveness.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="1table">
<table border="1">
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
</td>
<td>
<table>
<tr>
<td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
<td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</body>
</html>
Have a great day!
I think their was some error in your width & height selection for each div. I changed that and removed a little bit of extra flex properties and thats it Just tell me you want something like this.
Proposed code
.container{
display:flex;
width:100%;
height:60%;
}
.table{
display: flex;
flex-flow: column;
border: 1px solid #999696;
width: 25%;
height: 100%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
width:100%;
display: flex;
flex-direction:row;
}
.lone-image{
background:blue;
width:60%;
height: 100%;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 100%;
width: 40%;
}
.canon{
width: 100%;
background:green;
height:50%;
}
.dell{
background:red;
width: 100%;
height: 50%;
}
<div class="container">
<div class="table">
<table>
<tr>
<th class="cat"> Categories</th>
</tr>
<tr>
<th> Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th> Music & Equipment</th>
</tr>
<tr>
<th> Footwear</th>
</tr>
<tr>
<th> Software Products</th>
</tr>
<tr>
<th> Computer Hardware</th>
</tr>
<tr>
<th> Mobile Phones</th>
</tr>
<tr>
<th> Laptops</th>
</tr>
<tr>
<th> Furniture</th>
</tr>
<tr>
<th> Beauty Products</th>
</tr>
<tr>
<th> Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image">
</div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</div>
You were heading in the right direction I know flexboxes are really cool but they do take a little while to hang on.
Do tell me whether I was of any Help :)
Related
I want to give a spec table for the Watch 4. For now, I have this code.
<div class="specs">
<ul class="info">
<li>Lengte</li>
<li>44 mm</li>
</ul>
</div>
<div class="specs">
<ul class="info">
<li>Breedte</li>
<li>43.3 mm</li>
</ul>
</div>
with this CSS code
.specs{
position: relative;
top: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.info{
display: flex;
flex-direction: row;
color: black;
align-items: center;
margin-left: auto;
margin-right: auto;
border-bottom: 1px black solid;
padding: 0;
}
.info li{
display: flex;
flex-direction: row;
margin-right: 200px;
margin-left: 200px;
}
Here is the full project https://jsfiddle.net/2wvfyg16/
You might have to make the CSS tab bigger.
All the way at the bottom at the tab "Verbindungen".
It is all miss aligned.
As the data appears to be tabular, this snippet is a simple start on setting out the two columns with spacing in an HTML table.
Obviously you'll want to change things to give the exact layout your want but it does demonstrate that an HTML table can give the sort of formatting required.
#specs {
width: 100vw;
border-collapse: collapse;
}
#specs th {
font-size: 3em;
text-align: left;
padding-top: 1em;
}
#specs td {
width: 50%;
padding: 1em 5em;
}
#specs td {
font-size: 2em;
}
#specs tr:not(.cat) {
border-bottom: solid 1px black;
padding: 1em;
}
<table id="specs">
<tr class="cat">
<th colspan="2">Formaat</th>
</tr>
<tr>
<td>Lengte</td>
<td>44 mm</td>
<tr>
<td>Breedte</td>
<td>43.3 mm</td>
</tr>
<tr>
<td>Hoogte</td>
<td>9.8 mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>30 gram</td>
</tr>
<tr>
<td>Stofdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Spatwaterdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Waterdicht</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Display</th>
</tr>
<tr>
<td>Schermgrootte</td>
<td>40 & 44 mm</td>
</tr>
<tr>
<td>Schermtype</td>
<td>OLED</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Processor</th>
</tr>
<tr>
<td>Chipset</td>
<td>Samsung Exynos W920</td>
</tr>
<tr>
<td>Opslagcapaciteit</td>
<td>16 GB</td>
</tr>
<tr>
<td>Werkgeheugen</td>
<td>1500 MB</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Software</th>
</tr>
<tr>
<td>Besturingssysteem</td>
<td>One UI Watch</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Sensoren</th>
</tr>
<tr>
<td>Accelerometer</td>
<td>Jas</td>
</tr>
<tr>
<td>Hartslagmeter</td>
<td>Ja</td>
</tr>
<tr>
<td>Gyroscoop</td>
<td>Ja</td>
</tr>
<tr>
<td>GPS</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Batterij</th>
</tr>
<tr>
<td>Capaciteit</td>
<td>361 mAh</td>
</tr>
<tr>
<td>Vervangbaar</td>
<td>Nee</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Verbindingen</th>
</tr>
<tr>
<td>WiFi</td>
<td>Ja</td>
</tr>
<tr>
<td>Mobiel Netwerk</td>
<td>Nee</td>
</tr>
<tr>
<td>Bluetooth</td>
<td>Bluetooth 5.0</td>
</tr>
<tr>
<td>NFC</td>
<td>Ja</td>
</tr>
</table>
use justify items center i think it would work for that problem
I'm struggling with TABLE HTML.
I have no idea why this table tag doesn't work properly in browser
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
<td rowspan="3">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">1-3</td>
</tr>
</tbody>
</table>
The html above would be rendered like this
However the view I expected to see is like this
As I figured out, If I want to see what I want in browser, I should fix rowspans like this
<table border="1">
<tbody>
<tr>
<td rowspan="1">1-1</td>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-2</td>
</tr>
<tr>
<td rowspan="1">1-3</td>
</tr>
</tbody>
</table>
But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.
According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
</tr>
</tbody>
</table>
Have you tried flexbox yet? It is little bit different approach to solve this.
#main {
width: 100px;
height: 150px;
border: 1px solid #c3c3c3;
align-items: stretch;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 50px;
height: 50px;
line-height: 45px;
text-align: center;
}
#right {
width: 50px;
height: 150px;
}
#right div {
width: 50px;
height: 75px;
line-height: 70px;
text-align: center;
}
<div id="main">
<div style="background-color:lightgrey;" >1-1</div>
<div style="background-color:grey;">1-2</div>
<div style="background-color:lightgrey;">1-3</div>
<div id="right">
<div id="right" style="background-color:lightblue;">2-1</div>
<div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
I would like to bring this vertical scroll bar to the front. Here is the image.
I do not know how to set it.
UPDATE
I did a work around but the wrong part is that the items text element are not hidding behind the header. Here is my fiddle
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
background: red;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
As the scrollbar is on your table, there's no way you can have the scrollbar on top of the table header, and your table below the table header. Your best bet is to have it offset from top the height of the header:
So change your current CSS for your table body:
.table-body
{
position: relative;
overflow: auto;
height: 30%;
margin-top: 25px;
}
See this fiddle.
Update
Instead of adding padding-top:25px you need to add margin-top:25 to .table-body
This should work. Adding z-index to .table-header will fix the issue.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
z-index:1000;
background: red;
}
.table-body
{
position: relative;
margin-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can bring header on front by using z-index and after that just adjust the width of header to scroll-bar.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 96.8%;
background: red;
z-index:1;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
I would greatly appreciate help figuring this out. I'm working on a HTML table puzzle trying to match this image here:
I have everything good, make the red pillars on both sides using the rowspan tag, have the 1st, 2nd, 4th, and 5th row good, but the third row, with the three purple rectangles I just can't get to center themselves and resize to the smaller size without breaking the table.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body { background-color:black;}
table { background-color:white;
margin: 0px auto;
width:1000px;
height:500px;}
td { width:200px;
height:100px;
}
</style>
</head>
<body>
<table border="2px solid white">
<tr>
<td bgcolor="red" rowspan="5" align="left"></td>
<td bgcolor="white"></td>
<td bgcolor="green" colspan="2" align="center" colspan="2"></td>
<td bgcolor="white"></td>
<td bgcolor="red" rowspan="5" align="right"></td>
</tr>
<tr>
<td bgcolor="blue" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
</tr>
<tr>
<td bgcolor="green" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple" colspan="4"></td>
</tr>
</table>
</body>
</html>
You need more columns:
body {
background-color: black;
}
table {
background-color: white;
margin: 0px auto;
width: 1000px;
height: 500px;
border: 2px solid white;
}
td {
width: 200px;
height: 100px;
}
.red { background-color: red }
.white { background-color: white }
.green { background-color: green }
.blue { background-color: blue }
.purple { background-color: purple }
<table>
<tr>
<td class="red" rowspan="5"></td>
<td class="white" colspan="2" ></td>
<td class="green" colspan="3" ></td>
<td class="white" colspan="2" ></td>
<td class="red" rowspan="5"></td>
</tr>
<tr>
<td class="blue" colspan="7" ></td>
</tr>
<tr>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
</tr>
<tr>
<td class="green" colspan="7" ></td>
</tr>
<tr>
<td class="purple" colspan="7" ></td>
</tr>
</table>
Is this some kind of homework exercise? Anyways, instead of centering your table cells, try to add white table cells. You need more columns. And you have to recalculate your colspan attributes. Good luck!
It really doesn't seem too complex.
Just draw the wanted result on squared paper and you should be able to immediately detect the correct rowspan/colspan values to use.
Just note that when writing down the HTML you need to completely skip the <td>...</td> for cells that end up in the "extension" of cells considered before in the sequence.
For example consider a simple 4 rows x 3 cols table:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td { width:30px; height: 30px; text-align:center; }
</style>
</head>
<body>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
If you want to merge 1 and 2 you need to declare colspan=2 on the cell 1 and then omit cell 2. Similarily if you want to merge 5/6/8/9 you need to declare colspan=2 rowspan=2 on cell 5 and omit the merged ones:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td { width:30px; height: 30px; text-align: center; }
</style>
</head>
<body>
<table border=1>
<tr>
<td colspan=2>12</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td colspan=2 rowspan=2>56<br/>89</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
One alternative could be flexbox. I'm not saying it's better than a table, but this could be done as follows:
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
While I am very fond of flexbox, a table works at least as well for this issue (though if what you wanted were to change the right ways flexbox may become a better solution).
style:
#parent {
margin: 0px;
padding: 0px;
padding-left: 20vw;
padding-right: 20vw;
background-color: red;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
height: 100vh;
}
.row, .row-sm {
padding: 2px;
padding-bottom: 0px;
flex: 1;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: stretch;
align-items: stretch;
}
.row:last-child {
padding-bottom: 2px;
}
.row > div {
flex: 1;
}
#centered {
-webkit-justify-content: center;
justify-content: center;
}
#centered > div {
flex: initial;
width: 40%;
background-color: #655900;
}
#sm3 {
flex: .5;
/* This would not require the spacing divs; however, the start and end gap would be half the size it should be
-webkit-justify-content: space-around;
justify-content: space-around;
*/
}
#sm3 > div {
width: 16.6666%;
background-color: white;
}
#sm3 > div:nth-child(even) {
background-color: #111155;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.purple {
background-color: purple;
}
<div id="parent">
<div class="row" id="centered">
<div></div>
</div>
<div class="row">
<div class="blue"></div>
</div>
<div class="row" id="sm3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div class="green"></div>
</div>
<div class="row">
<div class="purple"></div>
</div>
</div>
NOTE: While this version scales, it could also be adjusted to have fixed content sizes; however, fixed content sizes could be done easily without flex anyway (just divs width widths/heights padding, ect).
<!DOCTYPE html>
<html>
<head>
<style>
td{
width: 75px;
height: 100px;
}
.r{
background-color: red;
}
.w{
background-color: white;
}
.g{
background-color: green;
}
.b{
background-color: blue;
}
.p{
background-color: purple;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="g" rowspan="2" colspan="3"></td class="g">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="b" rowspan="2" colspan="7"></td class="b">
</tr>
<tr>
</tr>
<tr>
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
</tr>
<tr>
<td class="g" rowspan="2" colspan="7"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="p" rowspan="2" colspan="7"></td class="r">
</tr>
</table>
</body>
</html>
clickhere