如何使用html根据表内容增加图像大小？

Question

我已经创建了一个表，再次创建了一个表，但是该表是在第一个表的内部创建的。

第一张桌子：我添加了一张图片。 第二张表：我写了一些内容。

内容很大，因此第二张桌子增加了，但第一张桌子和图像没有增加。因此如何增加图像尺寸。

我使用以下代码：

<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>
                                    </table>
                                </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>

Answer 1

尝试这个

<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="" style="width:100% ; padding: 2px 0px 2px 0px; background-color: #17B8DD">
                    <tbody>
                        <tr>
                            <td style="width:100%;">
                                <table>
                                    <tbody><tr>
                                        <td width="" style="padding-top:10px">
                                            <a href="http://www.s.com">
                                            <img src="http://dakhal.net/Archieves/2/image/news_image_98.jpeg" alt="S.INC style=" width="100%">
                                            </a>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </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>