HTMLテーブル応答100％幅

Question

私は、この今のところ持って、小さい画面サイズで2つのTDS 100％の幅を持たせることにより、単純なHTMLテーブルが応答作るしようとしています...

.test1{ 
 
background:teal; 
 
text-align:center; 
 
padding:20px; 
 
} 
 

 
.test2 { 
 
background:tan; 
 
padding:20px; 
 
text-align:center; 
 
}

<table style="width:100%;"> 
 
<tr> 
 
<td style="width:300px;" class="test1">Test Content</td> 
 
<td style="width:300px;" class="test2">Test Content</td> 
 
</tr> 
 
</table>

幅を100％に変更しようとしましたが、それは私のためには機能しませんが、CSSでこれを行う最も簡単な方法は何ですか？私は生成されるHTMLテーブルを制御できません。

フレックスボックススタイリングをテーブルに適用できますか？

Answer 1

あなたは、あなたの幅の画面サイズがとても

.test1 { 
 
     background: teal; 
 
     text-align: center; 
 
     padding: 20px; 
 
    } 
 

 
    .test2 { 
 
     background: tan; 
 
     padding: 20px; 
 
     text-align: center; 
 
    } 
 

 
    @media (max-width: 700px) { 
 

 
     .test1, .test2 { 
 
      width: 100% !important; 
 
      float: left; 
 
     } 
 
    }

<table style="width:100%;"> 
 
    <tr> 
 
     <td style="width:300px;" class="test1">Test Content</td> 
 
     <td style="width:300px;" class="test2">Test Content</td> 
 
    </tr> 
 
</table>

を変更メディアクエリを使用することができたときに幅の画面最大700pxその後、

とするとき700pxその後、

その後、より多くのあなたがあなたの条件として、複数のメディアクエリを追加することができます。

詳細については

https://www.w3schools.com/css/css_rwd_mediaqueries.asp