Question

我正在制作一份基金会时事通讯。我需要让我的背景转到全宽，但目前全宽度定义在中心：

如何让背景颜色变宽？基金会制作了一个预先编写的CSS，其宽度应该定义为：

.wrapper {
  width: 100%; }

#outlook a {
  padding: 0; }

body {
  width: 100% !important;
  min-width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  Margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

这是我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>A title</title>
  <link rel="stylesheet" href="css/foundation-emails.css" />

<style type="text/css">

.bgcolor {
    background-color: #fff;
}
.bgcolor--blue {
    background-color: #ccd8db;
}
.bgcolor--content--light {
    background-color: #ebe4cf;
}
.bgcolor--footer {
    background-color: #e8e8e8;
}
</style>
</head>

<body>
  <!-- <style> -->
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
          <table class="container" align="center">
            <tbody>
              <tr>
                <td>
                  <!-- Row 1 -->
                  <table class="row collapse" border="1px solid red">
                    <tbody>
                      <tr>
                        <th class="small-12 large-12 columns first">
                          <table>
                            <tr>
                              <th>
                                <center>
                                  <a href="https://www.google.dk/"><img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center"></a>
                                </center>
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                  <!-- Row 2 -->
                  <table class="row collapse bgcolor--blue">
                    <tbody>
                      <tr>
                        <th class="small-12 large-12 columns">
                          <table>
                            <tr>
                              <th>
                                <center>
                                  <a href="https://www.google.dk/"><img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center"></a>
                                </center>
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                </td>
              </tr>
            </tbody>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

默认情况下，表具有填充和cellspacing。您需要手动删除这些内容才能使您的内容占据元素的整个宽度和高度。

您需要在每个表格标签上执行此操作。

<table cellpadding="0" cellspacing="0">

https://jsfiddle.net/wb9qg34e/

关于表没有响应。您已将静态宽度设置为表格，并且有一个类通过

的最小宽度

td.large-12 center, th.large-12 center {
    min-width: 532px;
}

如果从table.container中删除宽度并添加如下所示的新类，它应该是完全响应的。

td.large-12 center, th.large-12 center {
    min-width: auto;
}

全宽背景在表中

1 个答案: