モーダルポップアップのレイアウト設計の提案

私の画面のレイアウト設計の提案を探しています。モーダルポップアップのレイアウト設計の提案

お客様の情報をタブレイアウトに表示するモーダルポップアップウィンドウがあります。これは、顧客ごとに1つのタブを意味します。各タブには3つのアコーディオンがあり、うち2つのアコーディオンにはテーブル（グリッド）があります。

これで、タブを使用する代わりに顧客データを並べて比較する必要がありました。最大4人の顧客を持つことができます。

2017-06-24 swingmicro

私は、これはあなたがのために行くされているものですと仮定します。 Layout diagram

私はあなたがそのために<table>タグを使用することをお勧め。各テーブル列（<td>）は1人の顧客を表します。

私は以下の例を提供しました。

body { 
 
    background-color: #ccc; 
 
} 
 

 
#modal { 
 
    width: 80%; 
 
    min-width: 100px; 
 
    height: 80%; 
 
    min-height: 100px; 
 
    background-color: white; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
#customer_table { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    width: 100%; 
 
    height: 75%; 
 
    vertical-align: top; 
 
    border-spacing: 0; 
 
} 
 

 
tr:first-child td { 
 
    height: 20px; 
 
    background-color: #5a5a5a; 
 
    color: white; 
 
} 
 

 
td { 
 
    border-left: solid #5a5a5a 1px; 
 
    border-right: solid #5a5a5a 1px; 
 
    border-bottom: solid #5a5a5a 1px; 
 
}

<html> 
 

 
<body> 
 
    <div id="modal"> 
 
    <h2>Customer table</h2> 
 
    <table id="customer_table"> 
 
     <tr> 
 
     <td>Customer 1</td> 
 
     <td>Customer 2</td> 
 
     <td>Customer 3</td> 
 
     <td>Customer 4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Customer data</td> 
 
     <td>Customer data</td> 
 
     <td>Customer data</td> 
 
     <td>Customer data</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-06-29 18:00:36 WebsitesOntario

モーダルポップアップのレイアウト設計の提案

答えて

関連する問題