Is it possible to make a table in HTML & CSS like this one?
I want to have one full height column (on the right) and the rest is rows as on the image.
1
-
I think what you're looking for is Bootstrap getbootstrap.comadnanyousafch– adnanyousafch2017-10-19 07:06:11 +00:00Commented Oct 19, 2017 at 7:06
Add a comment
|
2 Answers
You can achieve this easily with grids:
.thead {
padding: 5px;
grid-area: thead;
border: 3px solid gray;
}
.col {
grid-area: col;
border: 3px solid red;
}
.r {
border: 3px solid green;
padding: 5px;
}
.row-1 {
grid-area: row-1;
}
.row-2 {
grid-area: row-2;
}
.row-3 {
grid-area: row-3;
}
.row-4 {
grid-area: row-4;
}
.row-5 {
grid-area: row-5;
}
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"thead thead"
"row-1 col"
"row-2 col"
"row-3 col"
"row-4 col"
"row-5 col";
}<div class="container">
<div class="thead">thead</div>
<div class="col">Col</div>
<div class="r row-1">Row 1</div>
<div class="r row-2">Row 2</div>
<div class="r row-3">Row 3</div>
<div class="r row-4">Row 4</div>
<div class="r row-5">Row 5</div>
</div>
Grid-template-areas are really worth looking into.
Comments
Yes, this is possible with the rowspan and colspan attributes.
1 Comment
radoix
This is exactly it. The issue was that i had multiple <tbody> so i didnt work as expected :)