Question

我已经完成了当天的项目，通过chrome学习并从检查窗口获取更多知识。我常常只是猜测找到问题。我正在处理电子邮件通讯，并正在使用表格。

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

这里绿色和红色正对着下面的列。

我打开了检查窗口，但主要是我在猜测。那么其他人如何解决这个问题呢？我可以看到填充是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

嗯，您正在更改表格行为，但从技术上讲，您需要做的是将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使得进行未来的修改变得很痛苦，坦率地说，你将它用作拐杖而不是学习适当的特异性。唐＆＃39;吨。学会没有它工作。

使用Inspector窗口进行填充

1 个答案: