在网页设计中,表格是非常常见的元素。如果希望表格的风格更加个性化一些,可以采用CSS的li元素实现无框表格。
<ul class="table">
<li>姓名</li>
<li>年龄</li>
<li>性别</li>
</ul>
以上是一个简单的无框表格的代码,可以通过CSS进行样式设计。
.table {
list-style: none; /* 去掉li的原点 */
display: table; /* 将ul元素设置为表格 */
width: 100%; /* 设置表格宽度为100% */
border-collapse: collapse; /* 合并表格边框 */
}
.li {
display: table-cell; /* 将每个li元素设置为单元格 */
text-align: center; /* 设置文本居中 */
border: 1px solid black; /* 设置边框样式 */
padding: 10px; /* 设置内边距 */
}
通过以上CSS代码,无框表格所使用li元素样式就已经设置完成。可以根据实际需求调整表格样式和边距,使其更符合页面设计需求。
上一篇 css li向右对其
下一篇 css li对齐