我正在生成一个"table"
使用引导卡,通过$smarty
. viewport
当表格变小时,我想将表格折叠成 2 列。
这样标题将在左侧,具有如下属性:姓名、日期、年龄。右边对应的列有一行数据,如:Fred, 12.12.2012, 41。
尝试使用引导卡中的内置响应功能,但是当它viewport
变小时,所有内容都会折叠成 1 列。顶部有标题。我试过jquery.basictable.min.js
了,但它不起作用。
所需结果的简单图形:
name | stewie
date | 124214
age | 9000
name | bob
date | 45845
age | 65
<div class="container-fluid">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-4">
<span class="font-medium-3">name</span>
</div>
<div class="col-4">
<span class="font-medium-3">date</span>
</div>
<div class="col-4">
<span class="font-medium-3">age</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<span class="font-medium-3">stewie</span>
</div>
<div class="col-4">
<span class="font-medium-3">124214</span>
</div>
<div class="col-4">
<span class="font-medium-3">9000</span>
</div>
</div>
<div class="row">
<div class="col-4">
<span class="font-medium-3">bob</span>
</div>
<div class="col-4">
<span class="font-medium-3">45845</span>
</div>
<div class="col-4">
<span class="font-medium-3">65</span>
</div>
</div>
</div>
</div>
</div>
我将在此处提供一个链接以显示我想要实现的目标:http: //www.jerrylow.com/basictable/demo/
我认为 CSS 可以做很多我需要的事情,但我无法找到相关信息。