I have created a table. Then I created another table, but the second table appeared inside the first table.
First table: I inserted an image. Second table: I added some content.
The content in the second table is too large, causing the table to expand but the image in the first table remains the same size. How can I increase the size of the image?
This is the code I used:
<html>
<head>
<style type="text/css">
body {
font-family: Calibri;
}
table tr {
border: none;
}
a, a:link, a:visited, a:active {
text-decoration: none;
color: #09B0CE;
}
img {
border: none;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="0" align="center" id="main-panel" style="width: 100%; background-color:#f2f2f2; color: rgb(75, 75, 75); border-collapse: collapse; border: 1px solid #f2f2f2;">
<tbody>
<tr>
<td >
<table align="center" width="640px" style="width: 640px; padding: 2px 0px 2px 0px; background-color: #17B8DD">
<tbody>
<tr>
<td style="width:100%;">
<table>
<tr>
<td width="85%" style="padding-top:10px">
<a href="http://www.s.com">
<img src="http://KB/logo.png" alt="S.INC" style="height:auto; width:auto" sizes="80vw"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 0px 0px;">
<table style="color: #4D4D4D; font-size: 14px; font-weight: normal; width: 100%; border:1px solid #cccccc; padding: 10px 0px 10px 20px;" border="1px" cellspacing="2" cellpadding="3">
<tbody>
<tr style="padding: 10px 10px 5px 10px;">
<th style="width: 32%">Control</th>
<th style="width: 36%">Test Case Name</th>
<th style="width: 32%">Status</th>
</tr>
<tr style="padding: 10px 10px 5px 10px;">
<th style="width: 32%">EnterpriseServer</th>
<th style="width: 36%">AddPasswordForDataSource_ValidDataSourceIdAndPassword_PasswordAddedInDataSourceDetail</th>
<th style="width: 32%">Failed</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>