I'm working with a legacy table layout, and I've come across a layout problem with the scaling of images within a table cell.
The following code when in a page, scales the image up and down as the width of the browser window changes. However if you change the browswer height of the window up and down, it doesn't scale the image it seems to be locked to whatever the width of the image is. So if the window is wide, then the green section disappears off the bottom of the window
How can I make it so it scales based on height as well? Meaning the red section and the green section should squash the image till it is tiny as the height of the browser gets smaller.
There are javascript solutions to this problem, but I'd like to do it with HTML/CSS.
<style>
.red {
background-color: red;
}
.green {
background-color: green;
}
table {
height: 100vh;
table-layout: fixed;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table style="width:100%">
<col width="100">
<col width="100%">
<col width="100">
<tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
<tr>
<td> </td>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
</td>
<td> </td>
</tr>
<tr class="green" style="height:200px;">
<td> </td> <td> </td> <td> </td>
</tr>
</table>
</body>
so here is the width compressed, and the image shrinks...
here, the width is wider, but the height is the same, but the image is now taking more vertical height
Maybe those edits will be useful, play with it.
.red {
background-color: red;
}
.green {
background-color: green;
}
table {
height: 100vh;
table-layout: fixed;
}
img {
width: 100%;
height: 100%;
}
.image{
position: relative;
padding-top: 30vh;
}
.image img{
position: absolute;
top: 0;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
right: 0;
margin: auto;
left: 0;
}
<table style="width:100%">
<col width="100">
<col width="100%">
<col width="100">
<tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
<tr>
<td> </td>
<td class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
</td>
<td> </td>
</tr>
<tr class="green" style="height:200px;">
<td> </td> <td> </td> <td> </td>
</tr>
</table>
I set max-height for your image to visible the bottom green section in all devices. So you can resize it. You can adjust the max-height based on your requirement. I hope this solution may help you.
.red {
background-color: red;
}
.green {
background-color: green;
}
table {
height: 100vh;
table-layout: fixed;
}
img {
width: 100%;
height: 100%;
max-height: 450px;
object-fit: contain;
}
<table style="width:100%">
<colgroup>
<col width="100">
<col width="100%">
<col width="100">
</colgroup>
<tr class="red" style="height:100px;">
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
</td>
<td> </td>
</tr>
<tr class="green" style="height:200px;">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Your <col> widths were 100px, 100%, 100px which is 200px over. The middle column is a non-specified width so it takes whatever space the left and right fixed columns do not take.
The height for the first row is 100px and last row is 200px. The height of the middle row takes up the remaining vertical space. Special pseudo-classes were used to target the td (not the tr). tr seems the logical choice to modify height but it isn't't, because the nature of a html is content oriented therefore witdh and height is 90% td and 10% table.
tr:first-of-type td:first-of-type
tr:last-of-type td:last-of-type
<html> and <body> are set to 100% x 100% position:relative so the <table> assigned with position:absolute sits squarely within the viewport.
The middle row was expanded by colspan='3' and the image is now a background-image. With a minor change the image can expand and fill the whole row without overflow or shifting the other rows further. set background-size to cover from contain.
Demo
html,
body {
height: 100%;
width: 100%;
position:relative;
overflow:hidden;
}
* {
margin:0;
padding:0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
table {
height: 100%;
width:100%;
table-layout: fixed;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
}
tr:nth-of-type(2) td {background:url("https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" )no-repeat; background-size:contain;background-position:center center;}
tr:first-of-type td:first-of-type {
min-height: 100px;
}
tr:last-of-type td:last-of-type {
min-height: 200px
}
<table style="width:100%">
<col width="100">
<col>
<col width="100">
<tr class="red">
<td height='100'> </td> <td>
</td><td></td>
</tr>
<tr>
<td colspan='3'> </td>
</tr>
<tr class="green">
<td height='200'> </td>
<td></td>
<td> </td>
</tr>
</table>
Like this?
https://jsfiddle.net/xhc6ovzL/
<table style="width:100%">
<col width="100">
<col width="100%">
<col width="100">
<tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
<tr>
<td colspan="3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
</td>
<td> </td>
</tr>
<tr class="green" style="height:200px;">
<td> </td> <td> </td> <td> </td>
</tr>
Related
I am trying to make a web-page where I have a table of information and an image side-by-side as in the example below
Example:
bar fOo
Instead of:
bar
fOo
I have placed the image within a div and the information table in another div element, and I have been playing with the CSS properties to try to get them to be side-by-side, however they refuse to work as expected.
The CSS is below, #book is the image itself, while book_information is the information inside the table.
#book
{
float: right;
flex: 33.33%;
padding: 5px;
margin-left: 0;
width: 50%;
}
#book_information
{
width: 50%;
float: left;
padding-right: 0;
margin-right: 0;
}
table
{
border-collapse: collapse;
float:top;
border: 1px solid black;
table-layout: fixed;
width: 50%;
}
What should I use to allow this to work as expected? and what improvements could work I work on to get it responsive?
Below is the html structure of the page at the moment that I am using along with this:
<main>
<div>
<div class= "left" id="book"><img src="Book.jpg" alt="></div>
<div class="left" id="book_information">
<table id="information">
<tr>
<td class="1">Price:</td>
<td class="1">€18.90</td>
</tr>
<tr>
<td>Author</td>
<td></td>
</tr>
<tr>
<td class="1">About</td>
<td class="1"><p></p></td>
</tr>
<tr>
<td>Where to get it:</td>
<td>Amazon ,
Casa Del Libro ,
FNAC ,
Libelista
</td>
</tr>
</table>
</div>
</div>
</main>
There are different ways of doing this.
Here's a solution that involves using float:left style for your table:
table {
float: left;
}
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
This one involves putting your table and image in yet another table:
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
</td>
<td>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
</td>
</tr>
</table>
Here is the code for aligning contact details:
<html>
<body>
<table width="900" class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
<style>
img {
/* width: 100%; */
display: block;
}
</style>
</body>
</html>
You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.
Please see the screenshot attached: https://imgur.com/a/tjd9UOo
use css class for td and for each td can specify the inline width & height
.img {
background-repeat:no-repeat;
background-size: cover;
}
<table width="900" class="contact-details">
<tr>
<td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
<td><p>832.674.6834</p></td>
<td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
<td><p>271.217.4981</p></td>
<td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
<td><p>test#testpineced.com</p></td>
<td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
<td><p>1055 Loremips Tr. Kity, TX</p></td>
</tr>
</table>
<table width="900" class="contact-details" >
<tr>
<td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
<td>832.674.6834</td>
<td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
<td>271.217.4981</td>
<td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
<td>test#testpineced.com</td>
<td style='width: 30px'><img style='width: 30px' src="./images/address.png"></td>
<td>1055 Loremips Tr. Kity, TX</td>
</tr>
just change the width px according to the image width
**You have to remove width="900" and add padding to <td> element**
<html>
<head>
<style>
img {
/* width: 100%; */
display: block;
}
table{
margin:0 auto;
}
td{
padding-top:5%;
padding-left: 1%;
}
</style>
</head>
<body>
<table class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
</body>
</html>
How can I force the image to get the higher possible width without trespassing the max-height argument, and keeping the aspect ratio?
img {
display:block;
max-height: 100px;
max-width: 100%;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 500px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<img src="http://via.placeholder.com/200x50">
</td>
</tr>
</tbody>
<table>
Wrapping it in a container that forces those constraints should work for you:
img {
display:block;
width: 100%;
}
.cell-wrapper {
display:block;
max-width: 100%;
max-height: 100px;
overflow-y: hidden;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 1000px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<div class="cell-wrapper">
<img src="http://via.placeholder.com/200x50">
</div>
</td>
</tr>
</tbody>
<table>
I want to create a table which is square and contains of squares. The whole table must fit inside the window without scrolling. It's a bit hard to explain, here is an image what I want:
Is that possible? Until now, I have this but it is not really what I want...
FIDDLE
table {
width: 100%;
}
td {
width: 30%;
position: relative;
}
td:after {
content: '';
display: block;
margin-top: 100%;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
td img {
width: 100%;
height: 100%;
}
<table>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
</table>
if it is to fill entire height :
body {
margin: 0;
}
table {
margin: auto;
width: 100vh;
table-layout: fixed;
border-collapse: collapse;
}
td {
width: 33.33%;
}
img {
width: 100%;
display: block;
}
/* take care of portrait orientation or ratio */
html {
height: 100%;
display: flex;
}
body {
margin: auto;
}
table {
max-width: 100vw;
}
<table>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
<tr>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
<td>
<div class="content"><img src="http://placehold.it/128"></div>
</td>
</tr>
</table>
but if it comes into portrait , you might need js to find out ratio of window (landscape/portrait to overwrite style sheets rules).
the use of mediaqueries for orientation to reset width to vw units will be needed too
This will work with some jQuery: https://jsfiddle.net/rs136ksc/4/
Changed your rows to 3 (3x3 now).
The jQuery snippet makes your table's width exactly as much as your height. The table's height is exactly the window's height. This only works every time you load the page, so if you want it to be persistent you'll have to figure out some more jQuery. Good luck!
Some of the added CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:hidden;
}
table {
margin:0 auto;
height:100%;
}
jQuery:
var cw = $('.child').width();
$('.child').css({
'height': cw + 'px'
});
I have a scenario where one table had some tr and other table have less tr's than first one table.Both tables are under td's. In this Scenerio how to increase only last tr height of html table in % mode not in px mode
HTML CODE:
<table border="1" style="width:100%">
<tr>
<td style="width:50%">
<table border="1" style="width:100%">
<tr>
<td>
A
</td>
</tr>
<tr>
<td>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table border="1" style="width:100%;">
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
jsfiddle Demo
Try like this: Demo This will expand only last row of right side content
CSS:
table {
height: 100%;
width: 100%;
}
td {
}
.table {
display: table;
height:100%;
}
.cell {
vertical-align: top;
display: table-cell;
height:100%;
}
.container {
height: 100%;
-moz-box-sizing: border-box;
}
HTML:
<table border="1" style="width:100%;" class="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td class="cell">
<div class="container">Increse this row height till parents td height</div>
</td>
</tr>
</table>
EDIT: If you want right column should be equally expanded, you can use like this: Demo
CSS:
table {
height: 100%;
width: 100%;
}
Hope this is what you want!!
use single table and rowspan
<table border="1" style="width:100%">
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td rowspan="3">3</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>