Advanced table/grid with variable number of columns & widths & overflows - html

I'm in need of some help. I'm trying to create an advanced grid/table.
I have rows with:
a header
subheaders
rows that may contain info
my first column:
header: empty
subheader: name of squad
inforow: name of squadmember
what I need is a sort of grid/table with these requirements:
header: sticky
subheader: sticky under the header (until the next subheader arrives)
first column: fixed width of 250px
number of columns: variable
number of rows: variable
height of columns: 40px
a column with 0 infocells: fixed width of 50px
except when all columns are empty: all columns same width
a column where at least one item has info: minimum width of 100px
but when there is more space available: fill the remaining space evenly
infocolumns need to have a horizontal scroll when my space is overflown, for example:
available width for grid: 1000px
available width for infocolumns: 1000px - 250px = 750px
i have 10 infocolumns: 8 with info, 2 empty
so: 8 * at least 100px (scalable) & 2 * 50px → 900px
the infocolumns need to have a horizontal scroll, the first column, with squad(member)names, is sticky
I don't know exactly where the infocells will be before the data is fetched, but I already need to show a grid/table. Looping over the data in the parentcomponent would be less efficient, so hopefully it can be solved by html/css.
I do know how many columns there will be.
Maybe table isn't the right approach here either.
I'm almost there, but on a big screen the fixed width of the first column is variable and the horizontal flow isn't there yet.
This is what I got so far:
* {
box-sizing: border-box;
}
table {
width: 100%;
}
thead {
position: sticky;
top: 0;
height: 40px;
background: lightsalmon;
z-index: 1;
}
thead:not(:first-of-type) {
top: 44px;
}
th:first-of-type {
width: 250px;
min-width: 250px;
max-width: 250px;
}
td:first-of-type {
width: 250px;
min-width: 250px;
max-width: 250px;
}
td {
height: 40px;
background: lightpink;
}
td.has_data {
min-width: 100px;
width: auto;
}
td:not(.has_data) {
min-width: 50px;
width: 50px;
max-width: 50px;
}
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="table_wrapper">
<table>
<thead>
<th></th>
<th>01/03</th>
<th>02/03</th>
<th>03/03</th>
<th>04/03</th>
<th>05/03</th>
<th>06/03</th>
<th>07/03</th>
<th>08/03</th>
</thead>
<thead>
<th>the programmers</th>
<th>01:00</th>
<th>02:00</th>
<th>03:00</th>
<th>04:00</th>
<th>05:00</th>
<th>06:00</th>
<th>07:00</th>
<th>08:00</th>
</thead>
<tbody>
<tr>
<td>Jeff</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Eric</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="has_data">info!</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sarah</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="has_data">more info!</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


What about using a Framework that handles all that? Take a look at this: https://vuetifyjs.com/en/components/data-tables/#usage

Related

Make a table without showing the first cell

I want my table to be like that :
wanted table
Mine, is currently like that :
current table
The difference is that in the wanted table, the first cell (at position 0;0) is removed.
I also want to border to be updated, in order to make it goes through the bottom and the right of the removed cell.
The current result is that :current result
here is my current code :
table, th, td {
border: 0.5px solid black;
border-collapse: collapse;
}
.removeCell {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<link rel="stylesheet" href="css\desktopStyle.scss">
</head>
<body>
<table>
<tr>
<th class="removeCell">Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>

just remove the border on the first td
td{
border: 1px solid black;
width:40px;
height:10px;
}
table{
border-collapse:collapse;
}
#one{
border:none;
}
<table>
<tr>
<td id='one'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

how can a html table have misaligned cell borders

I am struggling to make a html table that copies the layout of the table above.
I am just wondering what techniques to use and to recreate that table
I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout

Here is a cool tool:
https://tabletag.net/
Here you need to nest a table in the second row
table,
td,
th {
border: 1px solid #595959;
border-collapse: collapse;
}
td,
th {
padding: 3px;
width: 30px;
height: 25px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
<td colspan="3" rowspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

% height if applied to tbody - doesn't work in FireFox & Microsoft Edge / IE but works in Google Chrome

I have following code -
Intention is to get fixed headers of table with scrollable tobody.
If I use height of tbody in pixels or in vh it works in chrome, firefox, or in microsoft browsers.
but if I use % height for tbody - it works only in chrome.
Anyone has any idea how to get it working in Firefox or Edge ?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.tableWrapper{
width:80%;
height:80vh;
border:1px solid red;
}
table{
border-collapse: collapse;
border:1px solid blue;
height:100%;
position:relative;
table-layout: fixed;
}
thead,tbody{
display:block;
}
td,th{
border:1px solid blue;
width:70px;
height:20px;
}
tbody{
height:30vh;
border:2px solid yellow;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Table</h1>
<div class="tableWrapper">
<table>
<thead>
<tr>
<th><br>sr no</th>
<th>First Name</th>
<th>Middle Name</th>
<th>last Name</th>
<th>Address</th>
<th>Age</th>
<th><br>Sex<br></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>

Add a two column above div but that column and div should not have gap

In div class background color is black, My question is make a two column in anyway so that the div class of horizontal line should not have gap while making a column.
Suppose i create a two column first and after i make a div class, the output will be shown the gap between column and div , I don't want that gap
<div class="right-div" style="background-color:black">
<table border="2px" style="background-color:red">
<tr>
<th bgcolor="#339A99"><font color="white">S.NO</font></th>
<th bgcolor="#339A99"><font color="white">Course</font></th>
<th bgcolor="#339A99"><font color="white">Duration</font></th>
<th bgcolor="#339A99"><font color="white">Credit Hours</font></th>
<th bgcolor="#339A99"><font color="white">No. Of Learners</font></th>
<th bgcolor="#339A99"><font color="white">Action</font></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

how to change width of <th> without affecting <td> width

I have here 2 photos. 1 is my HTML page and the other one is my print page.
My question is, how am I going to make my print page the same as my html page? As you can see, the print page is less wide than the HTML page.
Also, I want to ask how am I going to make the width of <th> longer without affecting the width of <td>? Is that possible?
Sorry, I don't have that much knowledge in CSS.
Print Page
HTML Page
and here is my code:
<table width="100%" border="1">
<tr>
<th align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

To get a nice print page width use media queries for example:
#media print {
#page {
margin: 30mm;
size:297mm 210mm;
}
}
Or use diffent stylesheets with different widths in stead of the same 100%
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
And in the style.css add:
table {width:100%}
And in style_print.css add:
table {width:297mm}
Play with the widths untill you are happy in both ;)
Here are some great posts on how to set up CSS for printing:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Just add colspan="6" to your th to set the correct width of your first cell.
<table width="100%" border="1">
<tr>
<th colspan="6" align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Tip: When I don't know what my html elements are doing I give them a border so I can see how they are behaving. In this case you don't have the same amount of <th> cells as <td> cells - just add a colspan=6 ( the same number of cells you have ) and your <th> cell will span across the whole table:
<tr>
<th colspan="6" align="left">II. Documentation</th>
</tr>
also you don't require the width unless you are trying to wrap the text ( but it sounds like you aren't. ) ...
oh, nevermind... answered above