html - 尝试使用 html 中的列表元素创建表格

标签 html css

我对这张 table 有疑问。我从来没有创建过这样的表。如果有人知道如何创建这种类型的表,如列表?帮帮我吧!请。所有建议表示赞赏。

这是我要使用的小代码:

<html>
<body>
<style>
li{
border:1px solid black;
text-align:center;
}
</style>
   <ul style="list-style: none outside none;">
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
   </ul>
</body>
</html>

下图将有助于更好地理解我如何需要输出。

Table like list

最佳答案

我认为您想将列表转换为表格布局。如果是,请将您的列表覆盖在一个 div 中并提供如下 css:

<div class="table">
   <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
    <ul>
      <li>Field 1</li>
      <li>Field 2</li>
      <li>Field 3</li>
   </ul>
  </div>

CSS

.table {
  display:table;
  width:100%;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
}
.table ul
{
  list-style:none;
  margin:0;
  padding:0;
  display:table-row;

}
.table ul li {
  display:table-cell;
  text-align:center;
   border-bottom:1px solid #ddd;
   border-right:1px solid #ddd;
  padding:2px 4px;
}

演示链接 http://jsbin.com/AHOVAKOJ/1

关于html - 尝试使用 html 中的列表元素创建表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20420530/

相关文章:

javascript - 在 DOM 中创建的文本节点在浏览器中不可见

python - 为一个名称 urllib2 发送多个值

HTML:检测 Unicode 并应用类

html - 边框半径在 IE9 中不起作用

Jquery - 带有 addClass 和 removeClass 的简单画廊

javascript - 从 POP UP 窗口中删除默认边框

css - 如何将多个字体添加到单独的标签中?

jquery - 当用户滚动鼠标时,如何使 Div 内的文字消失?

css - 如何在不使用边框和图像的情况下在 div 上制作 CSS 三 Angular 形背景?

修复了顶部的 HTML/CSS 导航栏,无法滚动页面