如何创建没有常规表标记的表？

Question

我怎么能创建一个没有<table>标签的表？所以它看起来应该像常规表,但不使用公共表标签.

Answer 1

您可以使用CSS tables具有相同功能的功能HTML tables.在此处了解有关属性的更多信息:CSS布局的反英雄 - "display:table".这是在CSS中引入的,以避免使用table标签,但不一定避免使用表格布局.他们仍然需要显示表格数据.

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid black;
}
.table-row:nth-child(even) {
  background: lightblue;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
</div>

Answer 2

ul li你可以像这样使用。

<html>

<body>
  <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>

Answer 3

您可以使用 div 创建。并使其轻松响应。

为之用display:table之。

.table {
  display: table;
  width: auto;
  border: 1px solid #666666;
}

.table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.table-col {
  float: left;
  display: table-column;
  width: 200px;
  border: 1px solid #ccc;
}

<div class="table">
  <div class="table-row">
    <div class="table-col">1</div>
    <div class="table-col">2</div>
    <div class="table-col">3</div>
  </div>
  <div class="table-row">
    <div class="table-col">a</div>
    <div class="table-col">b</div>
    <div class="table-col">c</div>
  </div>
</div>