gpt4 book ai didi

html - 如何使用纯 css 创建响应表

转载 作者:行者123 更新时间:2023-11-28 04:23:02 25 4
gpt4 key购买 nike

我想使用带有两列的纯 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>

最佳答案

这里是 plnkr 的链接和基于 css 的解决方案来创建响应表和列

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com