CSS：表の行の水平セルを真にできるようにすることはできますか？

Question

背景：私は、Webサイトが、あいまいな古いフレームワークの誰かによって作成されたクライアントを持っています。私は、ファイルを見て明確に識別できません。サイトには、メンバー組織が使用する複数ページの表データがあります。

構造的課題：コンテンツテーブルを別のシステムにiframeしたいと考えています。 iframeは正常に動作していますが、表はモバイル用には大きすぎます。 CSSを使用してテーブルの幅を狭くすることもできますが、情報を使用できなくなる可能性があります。

質問：divsを表形式に整列させる方法を知っています。アウトラインタイプの階層で、CSSを使用して、横に並んだ行を互いに横に並べるのではなく、横に並べることは可能ですか？

Answer 1

あなたがそれらdisplay: block;

td { 
 
    display: block; 
 
}

<table> 
 
    <tr> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    </tr> 
 
</table>

行うことができます私は、このためにブラウザのサポートについてはよく分からないが、あなたはtrのflex-columnすることができます。

tr { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<table> 
 
    <tr> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    <td>cell</td> 
 
    </tr> 
 
</table>