How to align responsive image side by side with table
Question
I have one table on the right side and i want to have an image on the left side aligned with the table. The problem is that when resize the page, the image size dosen't follow the table.
.div-contains{ background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg"); position: relative; background-repeat: no-repeat; background-size: 100%; }.div-forum{ overflow-x:auto; background-color:white; width:75%; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; padding: 8px; } tr{ border-bottom: 1px solid #ddd; }
<;DOCTYPE html> <html> <head> <style> </style> </head> <body> <div class="div-contains" > <div class="div-forum" > <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> </tbody> </table> </div> </div> </body> </html>
I would like to have table and image syde by side and when someone resize screen both have the same size. https://imgur.com/lMNkOdi.png
1 answers
solution1
0 ACCPTED 2021-02-12 11:14:17
If you must set image as background and set it on the right, here you go:
In your div-contains set this property:
background-size: 25%; /* From a 100% set 25% as your table width take 75% */
background-position: right; /* set it to the right */
DEMO
.div-contains{ background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg"); position: relative; background-repeat: no-repeat; background-size: 25%; /* From a 100% set 25% as your table width take 75% */ background-position: right; /* set it to the right */ }.div-forum{ overflow-x:auto; background-color:white; width:75%; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; padding: 8px; } tr{ border-bottom: 1px solid #ddd; }
<;DOCTYPE html> <html> <head></head> <body> <div class="div-contains" > <div class="div-forum" > <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> </tbody> </table> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to align image and label side by side in html?
How to align an image side by side with a heading element?
How to align an image in a table towards the right side of a row or something?
responsive 3 div side by side with image
Responsive Image and Text side by side
Align text and image side by side
Align two responsive divs, side by side
align two divs side by side with floating (responsive)
RESPONSIVE IMAGE ON RIGHT SIDE
Align an image on the right side
Related Tags