I have the following code but it makes the table appear like this when resizing. How can I make each row have a background image that is resized properly as the browser window is resized?
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top}
table {
width: 600px;
background-image: url('bg.png');
background-repeat: repeat-y;
background-size: 100%;
height: 100%;
}
}
</style>
<table class="tg">
<tr>
<td class="tg-0lax">Check</td>
<td class="tg-0lax">MB Image</td>
<td class="tg-0lax">LE 1000</td>
<td class="tg-0lax">MB Name<p />Release</td>
</tr>
<tr>
<td class="tg-0lax">Check</td>
<td class="tg-0lax">MB Image</td>
<td class="tg-0lax">LE 1000</td>
<td class="tg-0lax">MB Name<p />Release</td>
</tr>
<tr>
<td class="tg-0lax">Check</td>
<td class="tg-0lax">MB Image</td>
<td class="tg-0lax">LE 1000</td>
<td class="tg-0lax">MB Name<p />Release</td>
</tr>
<tr>
<td class="tg-0lax">Check</td>
<td class="tg-0lax">MB Image</td>
<td class="tg-0lax">LE 1000</td>
<td class="tg-0lax">MB Name<p />Release</td>
</tr>
</table>
I want each row to use this image:
and look like this and be resizable:
background-size? or is that not what you expected? If not clarify the expected result.
body{margin:0;} table { height: 100vh; width: 100vw; border-collapse: collapse } td { border: solid 1px } tr { background: url(https://i.stack.imgur.com/1aeFs.png) -6vw 0; background-size: 106% 100%; }
<table> <tr> <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> </tr> <tr> <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> </tr> </table>
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.