javascript - 如何使用 html 根据表格内容增加图像大小?

标签 javascript jquery css html

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

第一个表:我添加了一张图片。 第二张表:我写了一些内容。

内容很大,所以第二个表增加了,但第一个表和图像没有增加。那么如何增加图像大小。

我使用了以下代码:

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

最佳答案

试试这个

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

关于javascript - 如何使用 html 根据表格内容增加图像大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36836852/

相关文章:

html - 如何仅在特定宽度以下忽略换行符

javascript - String.format 不是函数

javascript - 用于在第 n 个字符处拆分字符串的正则表达式单行代码,其中 n 是可变长度

javascript - 查找数组中最近的日期

javascript - 将变量设置为 'undefined' 实际上会释放空间吗?

javascript - 如何向这个验证函数添加一个字符?

php - 设置 WooCommerce 结算公司后禁用特定付款方式

javascript - 数组列表在线显示一个来自json的结果

html - 显示 : block; VS display: table;

JavaScript 错误 : 'undefined is not a function' when trying to remove and add class to li element