パッディング用のインスペクタウィンドウを使用する

私はこの日のプロジェクトを作り、クロムの検査ウィンドウから学び、より多くの知識を得ることができました。私はしばしば問題を見つけるために推測しています。私は電子メールのニュースレターに取り組んでおり、テーブルを使用しています。パッディング用のインスペクタウィンドウを使用する

テキストと色を含む2つのテーブルを作成しています：Example Page。私が596を下回ると、赤と緑の色はテキストまでパディングされます。ここでは、緑と赤の色は以下の列に対して敷設され

Image of the design

：私はそれがこのように見えたことをしたいと思います。

私は検査窓を開けましたが、ほとんど私は推測しています。では、この問題を他の人々がどのように攻撃するのでしょうか？私はパディングが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>

出典

2017-02-05 Mimi

私の最初の投稿ですので、1つ以上のリンクを投稿するには十分な評判がありません。したがって、私はここで喧嘩にリンクしています：私はこれのために偽物を作った：https://jsfiddle.net/tknwytpk/ – Mimi

さて、あなたはテーブルの動作を変更することが、技術的に何をしなければならないことはth.small-12block代わりのinline-blockに変更されています。

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

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

しかし、あなたにはあまりにも多くの!importantが発生しています。私は通常、このディレクティブを決して使用しないことをお勧めします。

!importantは、将来の修正を行うことに苦労し、率直に言えば、適切な特異性を学ぶ代わりに松葉杖として使用しています。しないでください。それなしで働くことを学ぶ。

出典

2017-02-05 16:15:08

答えをありがとう。はい、私はたくさんの「重要！」があることに気付きました。しかし、それはフレームワークにあるので、私はこれに触れたくありません。私がパディングを変更できる唯一の方法は、重要なものを設定することでした。しかし、別の方法があるかもしれません。私はどのようにして検査窓を通して、これを変えなければならなかったのですか？ – Mimi

パッディング用のインスペクタウィンドウを使用する

答えて

関連する問題