css li实现无框表格

想要看得更远 6个月前 130浏览 0评论

在网页设计中,表格是非常常见的元素。如果希望表格的风格更加个性化一些,可以采用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对齐