プレーンcssを使用してレスポンシブテーブルを作成するには

2つの列とサブテーブルを含むプレーンcssを使用してレスポンシブテーブルを作成するとします。ここプレーンcssを使用してレスポンシブテーブルを作成するには

<div class="table"> 
    <div class="column main-column"> 
    <h3>Send Security Code</h3> 
    <div class="table"> 
     <div class="column"> 
      <span>Voice Primary</span> 
      <span>Text Primary</span> 
     </div> 
     <div class="column"> 
      <span>Voice Secondary</span> 
      <span>Text Secondary</span> 
     </div> 
    </div> 
    <button>Send Code</button> 
    </div> 
    <div class="column column-border main-column"> 
    <h3>Send password via email</h3> 
    <button>Send Email</button> 
    </div> 
</div>

出典

2017-02-08 Shashi

CSSベースのソリューションとのplnkrのためのリンクは、応答テーブルと列

https://plnkr.co/edit/TmT5lEaXs1LWTEOEEp1w?p=preview

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 

.table{ 
width:100%; 
} 

.column{ 
    width: 100%; 
} 

@media (min-width: 500px) { 
.column{ 
    display: inline-block; 
    width: 49%; 
    vertical-align: top; 
} 

.column-border{ 
    border-left: 1px dotted #996; 
} 
} 

.column span{ 
display:block; 
padding: 10px; 
} 

.column button, .column h3{ 
margin-left: 10px; 
} 

.main-column{ 
    height: 200px; 
} 
</style> 
</head> 
<body> 


<div class="table"> 
    <div class="column main-column"> 
    <h3>Send Security Code</h3> 
    <div class="table"> 
     <div class="column"> 
      <span>Voice Primary</span> 
      <span>Text Primary</span> 
     </div> 
     <div class="column"> 
      <span>Voice Secondary</span> 
      <span>Text Secondary</span> 
     </div> 
    </div> 
    <button>Send Code</button> 
    </div> 
    <div class="column column-border main-column"> 
    <h3>Send password via email</h3> 
    <button>Send Email</button> 
    </div> 
</div> 

</body> 
</html>

を作成することです

出典

2017-02-08 03:14:11 Shashi

プレーンcssを使用してレスポンシブテーブルを作成するには

答えて

関連する問題