2

この質問はこの質問に似ていますが、要件が追加されています。テーブルの親内の幅を 100% にしたいです。その質問からコピーされた画像：

細胞間隔画像

したがって、「緑色の部分」が親の幅の 100% を占め、セル間に黄色のスペースが必要です。

少なくともほとんどの場合、赤の間隔を「元に戻す」ためにテーブルで負のマージンを使用できます。

ただし、流動的なレイアウトでは常に機能するとは限りません。実際には、テーブルの幅を 100% にするのに十分なコンテンツがある限り (テーブルの幅はwidth:auto)、問題なく動作します。それを行うのに十分なコンテンツがない場合に問題が発生します。明らかな解決策width:100%ではそれが修正されないためです。テーブルは、境界線の間隔を含めて親に合わせて十分な幅になりますが、それを取り除いているため、テーブルはもはや十分な広さではありません。

私がこれまでに見つけた唯一の「解決策」は、テーブルを長く、できれば目に見えないコンテンツで強制的に埋めて、「実際の」100％まで埋めることです。しかし、これには純粋な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>

4

1 に答える 1

0

これを実現するには、一部の css を手動で処理する必要があります。

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-11T15:19:08.077 に答える