How do I make a table with styled rows?

How do I make a table with styled rows? - javascript

How would I create a table like this in css / html?
It seems like I would have to create a table for each row, and then the table would be a table filled with tables as each row...
I can't find anything on google except for rowspan and colspan but these seem to be too strict.
What should I google or look up to learn about creating tables like these?
I will fill each row with data from a database
I have tried googling how to create a styled table but everything that comes up is just a regular table with different colors.
I want to also add functionality to this by having a dropdown menu appear when clicking "message".
Would I just use a tag, or something completely different?

Like so (click "Run snippet" to visually see it):
I used TableTag.net to handle the tedious work of handling the rowspan for me, though:
table {
width: 100%;
}
table, td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 0.25em;
min-width: 30px;
height: 30px;
}
th {
background: #f0e6cc;
}
<table>
<tbody>
<tr>
<td rowspan="3">F</td>
<td rowspan="3">Joe</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Oakland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">D</td>
<td rowspan="3">Tanner</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Birchland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">M</td>
<td rowspan="3">Bret</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Palmland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">F</td>
<td rowspan="3">Hormon</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>Hormon#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Pineland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
</tbody>
</table>

Related

Adjust the layout of table when in mobile view

For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.

As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.

Remove css class if element is empty with JS

I have multiple tables that hold images throughout my document. Each table has 3 rows (Caption/Image/Source). I need to style my caption to have a border using CSS, but when the caption is blank, the caption class still appears in my markup, resulting in a random border appearing.
Table with caption:
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Table with no caption, with the class="caption" still in the table cell:
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="img"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to remove the caption class for cells that are empty, but my current JS removes the class for all my elements:
//remove empty caption
if ($('.caption').is(':empty')){
$("td").removeClass( ".caption" );
}
How can I update this so it only removes the class for empty .caption cells
JS Fiddle: https://jsfiddle.net/5dq63zL4/

very easy
td.caption:empty{
border:none
}

Instead of removing the class with JS, you can use the CSS pseudo-class :empty with :not, to style only non empty captions:
table {
margin: 20px 0
}
.caption:not(:empty) {
border-bottom: 1px solid red;
}
.source {
font-size: .85em;
color: #777
}
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>

How can I keep this table header fixed?

I'd like to keep this table header fixed, the problem is when I set the thead position to fixed it loses its size. Basically, I just want to keep the thead from moving with the rest of the table but with its original shape and size.
Thanks in advance.
table {
margin: 100 0 100 0;
width: 100%;
}
th,
td,
table {
/*word-wrap: break-word;*/
border: 1px solid black;
border-radius: 3px;
}
body {
overflow: hidden;
}
.scrollable {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
thead {
position: fixed;
width: 100%;
}
.myHead {
width: auto;
border: 11px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>MyTable</title>
</head>
<body>
<div class="scrollable">
<table>
<thead>
<tr class="myHead">
<th class="header" align="center">Title</th>
<th class="header" align="center">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
</tbody>
</table>
</div>
<div>----------------200px--------------></div>
</body>
</html>

Check out this question as it provides several resources that may help you solve your problem:
Freeze the top row for an html table only (Fixed Table Header Scrolling)
(Couldn't post a comment because I don't have the required reputation)

How to make a scrolling table with dynamic data

I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a fiddle here: http://jsfiddle.net/nokfw667/6/
The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.
Table example:
<Table id="ImageDataTable">
<thead>
<tr>
<th style="width:140px;">Whole Nbr</div>
<th style="width:90px;">Type</th>
<th style="width:190px;">Size</th>
<th style="width:100px;">Revision</th>
<th style="width:140px;">Other Nbr</th>
<th style="width:90px;">Sheet Nbr</th>
<th style="width:190px;">Of Sheets</th>
<th style="width:100px;">Frame Nbr</th>
<th style="width:140px;">Of Frames</th>
<th style="width:90px;">Doc Title</th>
<th style="width:190px;">Note</th>
<th style="width:100px;">Prnt</th>
<th style="width:140px;">Obs</th>
<th style="width:90px;">Acquire Date</th>
<th style="width:190px;">Source</th>
<th style="width:100px;">Base Doc</th>
<th style="width:140px;">Acc Doc Nbr</th>
<th style="width:90px;">CommonSubDirectory</th>
</tr>
</thead>
<tbody id="TmageDataBody" style="overflow:scroll">
<tr>
<td class="WholeNumberCell"></td>
<td class="WholeNumberCell">
ST
</td>
<td class="WholeNumberCell">
A
</td>
<td class="WholeNumberCell">
undefined
</td>
<td class="WholeNumberCell">
null
</td>
<td class="WholeNumberCell">
6
</td>
<td class="WholeNumberCell">
10
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
JOGGLING OF ALUMINUM ALLOY EXTRUDED
</td>
<td class="WholeNumberCell">
91179
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
0
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
\CDVolumes
</td>
</tr>
</tbody>
</Table></tbody>
</Table>
Anyone know what I am doing wrong?

#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
...
<Table id="ImageDataTable" style="overflow:scroll;">
You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.
If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.
Hope this helps.

Different number of Columns in rows of a table

Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..???
Note:
Row width and height are same
Cell width differs in each and every row
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells
I want like this

You can use colspan to create cells that span multiple columns.
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
Update
Your update with the image, yes you can accomplish this using colspan:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:
Update #2
Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}

Yes you can, with the colspan attribute for table cells, like this:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td colspan="5">2</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
</table>
Working example: http://jsfiddle.net/sk5cB/

Not positive that this is what you're looking for, but you could create a table with merged cells by using the colspan attribute in your <td> tags.
HTML colspan Attribute

You may also use and create a table in
<tr> </tr> tags

If you intend to insert content in those cells and prefer to maintain the same cell width then it is impossible using only tables. I've searched for solutions on this problem as well, it looks great when the cells are empty like Daniel Imms presented in his example, but if you add content to those cells their width starts getting bigger and the other cells on the row start getting smaller. Specifying table-layout:fixed doesn't help because then the first row becomes the rule for all following rows.
If you have the possibility to use divs with float left and width in percentage and a clear fix display:table div that wraps them all, just like Bootstrap 3 does in its grid system, then that'll be much more reliable.

Develop Reference

JavaScript is the programming language of the Web.

How do I make a table with styled rows? - javascript

Related

Adjust the layout of table when in mobile view

Remove css class if element is empty with JS

How can I keep this table header fixed?

How to make a scrolling table with dynamic data

Different number of Columns in rows of a table

Categories

Resources