セルの間隔はあるが外側の間隔がない全角テーブル

この質問はthis oneに似ていますが、要件が追加されています。テーブルの親内に100％の幅があるようにします。その質問からコピーした画像：セルの間隔はあるが外側の間隔がない全角テーブル

cellspacing image

だから私は100％親の幅、およびセル間の黄色の間隔とを取るために「緑の部分を」欲しいです。

表のマイナスマージンを使用して、少なくともほとんどの場合、赤い間隔を '元に戻す'ことができます。

しかし、これは流体レイアウトでは必ずしも機能しません。実際には、テーブルを100％幅にするのに十分なコンテンツがある限り（テーブルはwidth:autoです）、問題なく動作します。この問題は、明らかな解決策width:100%がそれを修正しないため、十分な内容がない場合に発生します。テーブルは、境界線の間隔を含む親に収まるほど十分に広いものの、それを取り除いているので、テーブルもはや十分ではありません。

私が今までに見つけた唯一の「解決策」は、「本当の」100％までいっぱいになるように、長い、好ましくは目に見えないコンテンツでテーブルを強制的に満たすことです。しかし、私はこれのための純粋なCSSのソリューションを望む...私はまた、可能な限り大きなブラウザのサポートを持つ計算/表現を使用しないことを望むだろう。手動でいくつかのCSSを処理する必要が達成するために、このために

body {padding: 1em} 
 
section {background-color: yellow} 
 
table {background-color: pink} 
 
td {background-color: lightgreen} 
 

 
table {border-spacing: 1em} 
 

 
table.working, table.failing {margin: -1em;} 
 
table.failing {width: 100%}

<body> 
 
    <section> 
 
    <h2>Simple table</h2> 
 
    <table> 
 
     <tr> 
 
     <td>cell 1</td> 
 
     <td>cell 2</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Succesful "100% width" for both cells</h2> 
 
    <table class="working"> 
 
     <tr> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Unsuccesful 100% width</h2> 
 
    <table class="failing"> 
 
     <tr> 
 
     <td>table with</td> 
 
     <td>100% width</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    </section> 
 
    </body>

出典

2016-08-11 Sygmoral

フレキシボックスここにオプション？ – j08691

@ j08691非常に良い点...ブラウザサポートは平均だったので、私はそのオプションについて忘れていましたが、今は大丈夫です。私の特に問題は、親の 'justify-content：space-between'で解決できます。私は明示的に "間のスペース"のサイズを設定することはできませんが、それは子供のサイズから動作します。しかし、私はそれが良いように微調整することができると確信している、それは確かに良いオプションです（それを答えとして追加自由）。私はそれがpre-flexboxを行うことができるかどうか不思議であるので、私は今質問を開いたままにします。そうでなければ...フライボックスです。 – Sygmoral

。

body {padding: 1em} 
 
section {background-color: yellow;} 
 
table {background-color: pink;} 
 
td {background-color: lightgreen} 
 

 
table {border-spacing:0;} 
 

 
table.working, 
 
/*table.failing {margin: -1em;}*/ 
 
table.failing {width: 100%; margin:0;} 
 
table tr td{ 
 
    border:5px solid #ff0000; 
 
    padding:10px; 
 
} 
 
.no-top{ 
 
    border-top:none; 
 
} 
 
.no-bottom{ 
 
    border-bottom:none; 
 
} 
 
.no-left{ 
 
    border-left:none; 
 
} 
 
.no-right{ 
 
    border-right:none; 
 
}

<body> 
 
    <section> 
 
    <h2>Simple table</h2> 
 
    <table cellpadding="0"> 
 
     <tr> 
 
     <td>cell 1</td> 
 
     <td>cell 2</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Succesful "100% width" for both cells</h2> 
 
    <table class="working"> 
 
     <tr> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     <td>cell with a lot of content to make sure that the table will be wide enough</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    <h2>Unsuccesful 100% width</h2> 
 
    <table class="failing"> 
 
     <tr> 
 
     <td class="no-top no-left">table with</td> 
 
     <td class="no-top no-right">100% width</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="no-bottom no-left">table with</td> 
 
     <td class="no-bottom no-right">100% width</td> 
 
     </tr> 
 
    </table> 
 
    
 
    <br> 
 
    
 
    </section> 
 
    </body>

出典

2016-08-11 15:19:08 jonju

そうですね、赤い詰め物がまだ残っています。私は赤いパディングを望んでいない、言い換えれば、私は黄色のエッジと緑のエッジを揃えたいと思う。 – Sygmoral

（私のコメントの冒頭で、私は欲しくないテーブルの端にある赤い詰め物について話しています。セル間の詰め物は唯一のものです） – Sygmoral

新しい答えを確認してください。あなたはピンクのパディングを引き起こす境界線間隔：1emを設定していました。 – jonju

セルの間隔はあるが外側の間隔がない全角テーブル

答えて

関連する問題