我正在寻找数据的替代移动演示,该演示将以表格形式显示在其桌面形式中。我看到了一个很好的示例,如下所示:
account____________________ 1234567
due date_______________ 10-NOV-2016
balance_____________________$100.00
note_____description and stuff here
我发现的示例看起来比这更好。但是这个想法是,列标题应该是左对齐的,列数据应该是右对齐的,并且可变宽度的水平规则将两者结合在一起。如果还有其他数据行,则每行都将重复相同的演示,尽管在我的上下文中,只会出现少数几行。
不幸的是,我在移动应用程序中观察到了这一点,尽管该应用程序基于HTML,但不能被视为HTML。我不知道此演示文稿是如何完成的,也无法制定出可以产生任何适用结果的搜索条件。
有任何想法吗?
最佳答案
flex和列表可能会做
li,
li b {
display: flex;
}
li b,
li b:after {
flex: 1;
}
li b:after {
content: '';
border-bottom: dotted;
margin: 0.7em 0.5em auto;
}
/* demo makeup*/
ul {
padding: 1em;
background: gray;
background-clip: content-box;
box-shadow: inset 0 0 1em;
margin: 1em;
}
li:nth-child(even){
background:linear-gradient(rgba(0,0,0,0.2),transparent,rgba(0,0,0,0.2));
<ul>
<li><b>Account</b> 123</li>
<li><b>Accounts</b> 123 456</li>
<li><b>Account Account</b> 123<br/> 456 789</li>
<li><b>Account Act</b> 123 456 789 000</li>
<li><b>Act</b> 123 456</li>
<li><b>count</b> 123 456 000</li>
</ul>