Question

我想使用普通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>

Answer 1

这是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>

如何使用普通css创建响应表

1 个答案: