使用 Inspector window 进行填充

Question

我今天做了一个项目，以在 chrome 中学习并获得更多 window 的知识。通常我只是在猜测中寻找问题。我正在处理电子邮件通讯，并且正在使用表格。

我正在制作两个包含一些文本和一种颜色的表格：Example Page。当我跌破 596 时；红色和绿色在文本之前得到填充。我希望它看起来像这样：

Image of the design

此处绿色和红色与下面的列相对。

我打开了检查 window，但大部分时间我都在猜测。那么这里的其他人会如何解决这个问题呢？我可以看到填充是 0px；所以我卡住了。

我用的是Foundation框架，所以核心很多CSS。

HTML

<style>
  /* Original Foundation Stylesheet has not been touched */
  .columns {
    border: 1px solid #333;
  }

  .first--column__color {
    background-color: #cd3f33;
    width: 1%;
  }
  .second--column__color {
    background-color: #5aa23c;
    width: 1%;
  }
  /* Removes 16px left-padding. Used in color columns*/
  table th, table td {
    padding: 0 !important;
  }

  .content-text {
    padding: 10px 10px 10px 10px !important;
  }

  </style>
</head>

<body>
  <!-- <style> -->
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
          <table align="center" class="container">
            <tbody>
              <tr>
                <td>
                  <table class="row">
                    <tbody>
                      <tr>
                        <th class="small-12 large-1 columns first first--column__color" style="width:1%;">
                          <table>
                            <tr>
                              <th>
                                <p class="text-left"></p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-5 columns first content-text">
                          <table>
                            <tr>
                              <th>
                                <h5><strong>This is headline 1</strong></h5>
                                <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-1 columns first second--column__color" style="width:1%;">
                          <table>
                            <tr>
                              <th>
                                <p class="text-left"></p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-5 columns first content-text">
                          <table>
                            <tr>
                              <th>
                                <h5><strong>This is headline 2</strong></h5>
                                <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>

Answer 1

好吧，您正在更改 table 行为，但从技术上讲，您需要做的是将 th.small-12 更改为 block 而不是 inline-block。

// @media only screen and (max-width: 596px)

td.small-12, th.small-12 {
    display: block !important;
    width: 100% !important;
}

但是，您的 !important 太多了。我通常建议人们根本不要使用此指令，它遍布您的样式表。

!important 使将来进行修改变得很痛苦，坦率地说，您将其用作拐杖而不是学习适当的特异性。不。学会在没有它的情况下工作。

使用 Inspector window 进行填充

Using Inspector window for padding

html

css

zurb-foundation