我想使用带有两列的纯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>
最佳答案
这是使用基于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>
关于html - 如何使用纯CSS创建响应表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42103988/