2016-12-11 12 views
0

私は現在、モバイルフレンドリーなウェブサイトで作業しています。この場合、私は同じHTMLを使用する必要があります。私はいくつかの小さな調整を行うことができますが、私はこのデフォルトのCSSに戻すときに同じように見える必要があります。列を別の列の下に配置するにはどうすればよいですか?

#explain{ 
 
\t position:absolute; 
 
\t top:100px; 
 
\t left:20px; 
 
\t width:95%; 
 
\t min-width:0; 
 
\t margin:auto; 
 
\t column-count:1; 
 
}#explain th{ 
 
\t margin:0px; 
 
}#explain_icon img{ 
 
\t width:130px;}
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<table id="explain" cellspacing="15px"> 
 
       <tr id="explain_icon"> 
 
        <td><img src="IMG/group.png" alt="Image has failed to load"></td> 
 
        <td><img src="IMG/Bell.png" alt="Image has failed to load"></td> 
 
        <td><img src="IMG/Warrenty.png" alt="Image has failed to load"></td> 
 
       </tr><tr> 
 
        <th>Japan</th> 
 
        <th>is a</th> 
 
        <th>smaller china</th> 
 
       </tr><tr> 
 
         <td><b>The 
 
         </b></td> 
 
         <td><b>Human 
 
         </b></td> 
 
         <td><b>Esophagus 
 
         </b></td> 
 
      </tr></table> 
 
    
 
    </body> 
 
    <html>

答えて

0

使用ブートストラップ。あなたのウェブサイトにブートストラップを統合し、htmlページを行と列のクラスに分けるだけです。これは、あらゆるウェブサイトをモバイルフレンドリーにするのに最適な方法です。

+0

私は自分の知識が不足していることと、すべてのコードを書き直さなければならないという事実のために、ブートストラップを使用したくないと思います。 – Reemor

0

テーブルをディバイダ形式に変更することで私の問題を解決しました。また、コード内の個々のオブジェクトのリストも作成しました。私はCSSに入り、ディスプレイが基本的にすべての列を作った「テーブル」に入るように変更しました。

関連する問題