html 表格 100% 宽度-6ren

html 表格 100% 宽度

转载作者：太空宇宙更新时间：2023-11-04 02:09:10

真是个愚蠢的问题，但我无法让它像我想的那样工作……不要再做太多 html 了。这是我得到的:

<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10">&nbsp;</th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} &nbsp;</td>
<td>&nbsp;</td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} &nbsp;</td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>

第二个表格不符合600宽度，好像某处被覆盖了。我想如果我写任何类型的内联样式它会覆盖其他所有内容。 ...我基本上希望我的第二个表与第一个表大小相同。

我试过只放一个额外的 <tr><td></td></tr>在第一个表中并完全消除第二个表，但它使一个 td 变宽并在前两个 td 中挤压另一个

*****这是一封电子邮件*****

这是 header.phtml文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- utf-8 works for most cases -->
        <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
        <title></title>
        <!-- The title tag shows in email notifications, like Android 4.4. -->
        <style type="text/css">
            /* What it does: Remove spaces around the email design added by some email clients. */
            /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
            html,
            body {
            margin: 0;
            padding: 0;
            height: 100% !important;
            width: 100% !important;
            }
            /* What it does: Stops email clients resizing small text. */
            * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            }
            /* What it does: Forces Outlook.com to display emails full width. */
            .ExternalClass {
            width: 100%;
            }
            /* What it does: Stops Outlook from adding extra spacing to tables. */
            table,
            td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            }
            /* What it does: Fixes webkit padding issue. */
            table {
            border-spacing:0 !important;
            }
            /* What it does: Fixes Outlook.com line height. */
            .ExternalClass,
            .ExternalClass * {
            line-height: 100%;
            }
            /* What it does: Fix for Yahoo mail table alignment bug. */
            table {
            border-collapse: collapse;
            margin: 0 auto;
            }
            /* What it does: Uses a better rendering method when resizing images in IE. */
            img {
            -ms-interpolation-mode:bicubic;
            }
            /* What it does: Overrides styles added when Yahoo's auto-senses a link. */
            .yshortcuts a {
            border-bottom: none !important;
            }
            /* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
            /* Create a class for every link style needed; this template needs only one for the link in the footer. */
            .mobile-link--footer a {
            color: #666666 !important;
            }
            /* What it does: Overrides styles added images. */
            img {
            border:0 !important;
            outline:none !important;
            text-decoration:none !important;
            }
            @media screen and (min-device-width: 768px) {
            /* Hides the nav menu except for gmail */
            *[class].desktopHide {
            display: none !important;
            }
            }
            /* Media Queries */
            @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
            /* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
            .email-container {
            width: 100% !important;
            }
            /* Hides the nav menu except for gmail */
            *[class].mobileHide {
            display: none !important;
            }
            /* What it does: Forces images to resize to the width of their container. */
            img[class="fluid"],
            img[class="fluid-centered"] {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin: auto !important;
            }
            /* And center justify these ones. */
            img[class="fluid-centered"] {
            margin: auto !important;
            }
            /* What it does: Forces images to resize to the width of their container. */
            img[class="stack-column"],
            img[class="stack-column-center"] {
            width: 100% !important;
            max-width: 600px !important;
            height: auto !important;
            margin: auto !important;
            }
            img[class="stack-column-half"],
            img[class="stack-column-center-half"] {
            width: 100% !important;
            max-width: 300px !important;
            height: auto !important;
            margin: auto !important;
            }
            img[class="stack-column-third"],
            img[class="stack-column-third-center"] {
            width: 100% !important;
            max-width: 120px !important;
            height: auto !important;
            margin: auto !important;
            }
            /* What it does: Forces table cells into full-width rows. */
            td[class="stack-column"],
            td[class="stack-column-center"] {
            display: block !important;
            width: 100% !important;
            direction: ltr !important;
            }
            /* What it does: Forces table cells into full-width rows. */
            td[class="stack-column-half"],
            td[class="stack-column-half-center"] {
            display: inline-block !important;
            width: 50% !important;
            direction: ltr !important;
            }
            td[class="stack-column-third"],
            td[class="stack-column-third-center"] {
            display: inline-block !important;
            width: 32% !important;
            direction: ltr !important;
            }
            /* And center justify these ones. */
            td[class="stack-column-center"] {
            text-align: center !important;
            }
            /* Data Table Styles */
            /* What it does: Hides table headers */
            td[class="data-table-th"] {
            display: none !important;
            }
            /* What it does: Hides table headers */
            td[class="data-table-th"] {
            display: none !important;
            }
            /* What it does: Change the look and layout of the remaining td's */
            td[class="data-table-td"],
            td[class="data-table-td-title"] {
            display: block !important;
            width: 100% !important;
            border: 0 !important;
            }
            /* What it does: Changes the appearance of the first td in each row */
            td[class="data-table-td-title"] {
            font-weight: bold;
            color: #000000;
            padding: 10px 0 0 0 !important;
            border-top: 2px solid #eeeeee !important;
            }
            /* What it does: Changes the appearance of the other td's in each row */
            td[class="data-table-td"] {
            padding: 5px 0 0 0 !important
            }
            /* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
            td[class="data-table-mobile-divider"] {
            display: block !important;
            height: 20px;
            }
            /* END Data Table Styles */
            }
        </style>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
            <tbody>
                <tr>
                    <td>
                    <!-- Visually Hidden Preheader Text : BEGIN -->
                    <div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
                    Shop new arrivals now!
                    </div>
                    <!-- Visually Hidden Preheader Text : END -->
                    <!-- Email wrapper : BEGIN -->
                    <table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
                        <!-- Full Width, Fluid Column : BEGIN -->
                        <tbody>
                            <tr>
                                <td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
                                <a href="[[BrowserLink]]" title="View In Browser" style="color: #999999;">View in Browser</a>
                                </td>
                            </tr>
                            <!-- Full Width, Fluid Column : END -->
                            <tr>
                                <td>
                                <!-- Logo + Links : BEGIN -->
                                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td height="5" style="font-size: 0; line-height: 0;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
                                            <a href="http://www.website.com/?email=#Listrak\Email#" title="website.com"><img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;"></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="5" style="font-size: 0; line-height: 0;">&nbsp;</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- Logo + Links : END -->
                                <!-- Menu : BEGIN -->
                                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- Menu : END -->
                                <!-- Free Shipping Pre-Header : BEGIN -->
                                <table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                            <table align="center" border="0" cellpadding="0" cellspacing="0">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td style="border-top: 0px solid #eeeeee;" height="2">
                                            <img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

最佳答案

查看仅包含两个表格的第一段代码，它们以相同的宽度显示。我修改了您的代码，在两个表格上都放置了 2 号红色边框，您可以看到它们的宽度确实相同。

<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
      <th width="10">&nbsp;</th>
      <th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} &nbsp;</td>
      <td>&nbsp;</td>
      <td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} &nbsp;</td>
    </tr>
  </tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
        {{/depend}} {{layout handle="sales_email_order_items" order=$order}}
        <p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
      </td>
    </tr>
  </tbody>
</table>

至于您的第二段代码(header.phtml 文件)，老实说，我不太明白它与您的第一段代码有什么关系。您提供的代码不完整，表中表中的嵌套表(其中许多是单行，单个数据单元)过于复杂，无法在此处破译。

由于这是针对电子邮件的，而且我在电子邮件中获得正确的 HTML 格式方面也有自己的战斗伤痕，我会说你必须抛弃所有现代标准和 HTML 开发风格，尤其是当涉及到Microsoft 电子邮件客户端，假装又回到了 1990 年代。遗憾的是，有时需要嵌套表才能获得所需内容(不寒而栗)。就像任何 HTML 设计一样，布局越简单，您实现它的时间就越容易。

这里还有一些链接，我发现在让 HTML 电子邮件正常运行时，这些链接对于引用和教育非常宝贵。希望它们也能帮助您:

关于html 表格 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40118335/

文章推荐： c++ - fprintf 不打印 Unicode 字符

文章推荐： javascript - Node.js 上的 ReCaptcha 验证

文章推荐： python - 变量未记录值的变化

文章推荐： c - 为什么我用 putchar(); 打印垃圾？在这个for循环中？

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html 表格 100% 宽度