表中的全角背景

Question

I am making a newsletter with foundation. 我正在用基础制作时事通讯。 I need to get my background to go to full width, but at the moment the full width is defined in center: 我需要使背景变为全角，但此刻全角在中心定义：

My Example 我的例子

How can I make the background color go full width? 如何使背景色变为全角？ Foundation has made a prewritten CSS, where the width should be defined: Foundation已经编写了一个预写的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; }

This is my code 这是我的代码

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

Table have padding and cellspacing by default. 表格默认具有填充和单元格间距。 You'll need to manually remove these in order for your content to take up the full width and height of the element. 您需要手动删除这些内容，以使内容占据元素的整个宽度和高度。

You'll need to do this on every table tag. 您需要在每个表格标签上执行此操作。

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

https://jsfiddle.net/wb9qg34e/ https://jsfiddle.net/wb9qg34e/

With regards to the table not being responsive. 关于表没有响应。 You have set static widths to the table and there is a class pulling through that has a min width on 您已经为表格设置了静态宽度，并且有一个通过该类的最小宽度的类

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

If you remove the width from the table.container and add a new class like below, it should be fully responsive. 如果从table.container中删除宽度并添加如下所示的新类，则它应该是完全响应的。

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

表中的全角背景

问题描述

1 个解决方案

解决方案1
0 2017-01-25 11:35:33

表中的全角背景

问题描述

1 个解决方案

解决方案1 0 2017-01-25 11:35:33

解决方案1
0 2017-01-25 11:35:33