Question

如何创建没有<table>标记的表格？所以它看起来应该像常规表，但不使用公共表标签。

Answer 1

您可以使用与CSS tables功能相同的HTML tables。在此处详细了解这些属性：The Anti-hero of CSS Layout - "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>

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

3 个答案: