I have a code that acts differently on Firefox and Chrome.
The behaviour I want is the one on Firefox. I want to reproduce it on Chrome without success.
In the following code, the idea is that the tr class="spacer" fills the remaining height below the the tr class="family" rows so they would be displayed at the top of the tr class="category" row.
On Chrome this is completely inconsistent...
.category th {
height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="category">
<th rowspan="3">Category 1</th>
</tr>
<tr class="family">
<td>Family 1</td>
<td>Many different things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="category">
<th rowspan="4">Category 2</th>
</tr>
<tr class="family">
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="family">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
I think the problem is how you structure your table but I have no solution using html tables.
I would rather use the css grid property. It needs a little bit more code but it provides in my Opinion more options a better responsiveness and so on.
I wrote down some code to display the same as you want with the tables. Of course you can modify the code to make it work more like you planned but it‘s a basic structure.
Html:
<div class="grid">
<div>Category</div>
<div>Family</div>
<div>Info</div>
<div class="first">
<div class="grid-category">Category 1</div>
<div class="family">Family 1</div>
<div class="family">Many different things</div>
</div>
<div class="second">
<div class="grid-category">Category 2</div>
<div class="family">Family 2</div>
<div class="family">Many different things</div>
<div class="family">Family 3</div>
<div class="family">Many different things</div>
</div>
</div>
Css:
.grid-category {
min-height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
.grid {
display: inline-grid;
grid-gap: 4px;
grid-template-columns: auto auto auto;
grid-template-rows: 16px auto auto;
}
.first,
.second {
display: grid;
grid-column: 1 / 4;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
}
.grid-category {
grid-row: 1 / 4;
}
According to this example https://www.w3schools.com/tags/att_td_rowspan.asp, I rewrite your code like this. Hope this help you.
<html>
<head>
<style>
.custom th {
height: 200px;
background: red;
}
.custom td {
height: 70px;
background: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="custom">
<th rowspan="3">Category 1</th>
<td>Family 1</td>
<td>Many different things</td>
</tr>
<!-- Add 2 spacer for enough 3 row because rowspan = 3 -->
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="custom">
<th rowspan="4">Category 2</th>
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="custom">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I'm trying to put an HTML table on the right side of a canvas and for some reason, it has huge spaces between rows.
I've tried the solution here
and here but none of them solved the problem.
Here's my current code:
<html>
<body style="margin: 0px">
<div style="display: flex">
<canvas style="background-color: blue;"></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
</body>
</html>
Solution 1 - Set align-items: flex-start in div because the default value is stretch
div {
display: flex;
align-items: flex-start;
}
canvas {
background-color: blue;
}
table {
border: 1px solid red;
}
<div>
<canvas></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
Solution 2 - Set align-self: flex-start in table
div {
display: flex;
}
canvas {
background-color: blue;
}
table {
border: 1px solid red;
align-self: flex-start
}
<div>
<canvas></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
Set the table height to min-content
<table style="height: min-content;"> ... </table>
<div style="display: flex">
<canvas style="background-color: blue;"></canvas>
<table style="height: min-content;">
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
This is probably really easy but I'm stuck trying to remove whitespace from a table cell when reducing the width of a nested image.
Eg I want to remove the whitespace in this example
JSFiddle: https://jsfiddle.net/8qm61hny/
HTML:
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.q_p2_img {
width:60%;
}
I've tried various css display options but cannot find what I need to do this.
Don't use percentage value because percentage value will get resolved after setting the parent width since we need a reference to resolve it. In your case, you will have 60% of the parent size and 40% of whitespace.
Use pixel value instead:
.q_p2_img {
width: 200px;
}
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use this minimum table css for cross-browser and responsive <table> styling
html
<div class="tbl">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr>
<td>MoreData 21</td>
<td>MoreData 22</td>
</tr>
</tbody>
</table>
</div>
css
.tbl {
width: 100%; /* table width */
box-sizing: border-box;
overflow-x: auto;
}
.tbl * {
margin: 0;
box-sizing: border-box;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 0; /* remove gap */
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
font-size: 16px;
}
#media (max-width: 767.9px) {
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
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>
I'm trying to display divs with either one or two tables next to each other. The tables should be centered:
*div****************************************************************************
* Table 1 *
* |...|...|...| *
********************************************************************************
*div****************************************************************************
* Table 2 Table 3 *
* |...|...|...| |...|...|...| *
********************************************************************************
My html looks something like this:
<div class="all">
<div class="row"> <!-- row with 1 table in it -->
<div class="column">
<table class="centered">
...
</table>
</div>
</div>
<div class="row"> <!-- row with 2 tables in it -->
<div class="column">
<table class="centered">
...
</table>
</div>
<div class="column">
<table class="centered">
...
</table>
</div>
</div>
</div>
I have so far failed to find the proper CSS for it. My current CSS looks like this:
div.row {
display: block;
width: 100%;
}
div.column {
display: inline;
margin-left: auto;
margin-right: auto;
}
table.centered {
border: 1px;
border-style: solid;
margin: 20px;
}
jsfiddle is here: jsfiddle
Please help me understand CSS...
Use Flexbox and it will work no matter how columns you add in each row:
.row {
display: flex;
justify-content: center;
}
jsfiddle
If you don't want to use flexbox (not compatible to older browsers), erase the display: inline; from column, add text-align: center; to it and also add display: inline-table; to .centered:
(inline elements can be centered using text-align: center; on their container)
div.row {
display: block;
width: 100%;
}
div.column {
margin-left: auto;
margin-right: auto;
text-align: center;
}
table.centered {
border: 1px;
border-style: solid;
margin: 20px;
display: inline-table;
}
<div class="all">
<div class="row">
<div class="column">
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="column">
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
https://jsfiddle.net/pLccg6w3/
Not sure if this is what you were looking for but here is a fiddle I posted. I made table.centered float:left; and then added a .left and . right class for the first and third box and simply gave them a margin-top:100px;
https://jsfiddle.net/k9w7yt0f/1/
How to design this using html and css
Use colspan. Example:
<table>
<tr>
<td colspan="4">A header</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</table>
It's just a th inside table using colspan=7
<table border="1">
<tr>
<th colspan="7">This will span 7 columns</th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<!-- Same for the rest here -->
</table>
Fiddle
For this kind of header you need to use table and colspan. That is the better one. Now, here i've posted the same thing using div
HTML
#header
{
background: #333333;
color: #FFFFFF;
width: 600px;
height: 70px;
}
.th
{
height: 35px;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
.td
{
height: 35px;
width: 100px;
text-align: center;
border-right: 1px solid #FFFFFF;
display: table-cell;
}
CSS
<div id="header">
<div class="th">Single line</div>
<div class="td">1st column</div>
<div class="td">2nd column</div>
<div class="td">3rd column</div>
<div class="td">4th column</div>
<div class="td">5th column</div>
<div class="td">6th column</div>
</div>
<table width="100%">
<tr>
<td >header</td>
<td > header</td>
<td > header</td>
<td > header</td>
<td > header</td>
<td valign="top">
<table width="100%" >
<tr>
<td colspan="7">Main Header</td>
</tr>
<tr>
<td>AUV</td>
<td>4WM</td>
<td>6WH</td>
<td>PWD</td>
<td>10WH</td>
<td>20FT</td>
<td>40FT</td>
</tr>
</table>
</td>
<td > header</td>
<td > header</td>
</tr>
</table>
<table>
<tr>
<th colspan="7">
</th>
</tr>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
<th>
Column 4
</th>
<th>
Column 5
</th>
<th>
Column 6
</th>
<th>
Column 7
</th>
</tr> </table>