Make a table without showing the first cell - html

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>

Related

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>

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

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

% 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>

How to create table according to screenshot using html and css

I have only problem with the small column. How to create the small column.

Here is a rough solution, using the rowspan and colspan attributes:
<style>
th, td {
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
<table>
<tr>
<th rowspan="2">Description of waste</th>
<th rowspan="2" colspan="6">List of wastes</th>
<th rowspan="2">Quantity</th>
<th colspan="2">The chemical/biological components</th>
<th rowspan="2">Physical form</th>
<th rowspan="2">Hazard code(s)</th>
<th rowspan="2">Container type</th>
</tr>
<tr>
<th>Component</th>
<th>Concentration</th>
</tr>
<tr>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
</tr>
</table>

Class Schedule difficulty

I am having a bit of trouble making a class schedule in HTML coding, I got to have the times like: 1:00, 1:30 etc. on the left and in the main body having rowspans for the different classes on the different days.
An example would be I have the same classes on monday and wednesday but no classes on tuesday thursday friday saturday or sunday.
In my efforts so far I am able to span the rows but unfortunately get extra columns at the end.
<table border="1">
<tr>
<th>TIME</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>8:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>10:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>10:30</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>11:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>11:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>12:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>12:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:00PM</th>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>4:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>5:00PM</th>
<td rowspan="3">class</td>
<td></td>
<td rowspan ="3">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>5:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>6:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>6:30PM</th>
<td></td>
<td></td>
<td rowspan="5">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>7:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>7:30PM</th>
<td rowspan="6">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Here is an example of your problem.. notice how in one of the rows, I filled in the letter "d" for each cell for that row:
http://jsfiddle.net/57FLP/
<tr>
<th>1:00PM</th>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:30PM</th>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
</tr>
Looking at the html code, the letter 'd' for each <td></td>, which happens to be 7 times; your table also shows it 7 times; however because you are doing a rowspan, from one of your rows somewhere in the middle, you're cutting into the rows below it. Don't think of your row span as a knife cutting through butter, think of it as your hand chopping down on a bunch of apples (not cutting through them, but moving them, the apple will then fill up the sides as it has no where else to go); this is analogous as to what is happening with you table.
Just think about what happens if all your <td></td> are filled with data, and you just happen to convert one as a rowspan, where would all that data go? You don't want to lose any of it.
What you need to do, is for every change you make, you have to cut off the remaining unused tds from your table.