Question

我想将表转换为div表，但是当我在Dreamweaver中创建表时，它只添加了<tbody>标记。将表转换为div-table时是否需要它？

这是表格的代码

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

正如你所看到的，我想要一个使用带

的div的表

width="100%" border="0" align="left" cellpadding="0" cellspacing="0"

这样做的正确方法是什么？是否需要为<tbody>标记设置另一个div？

Answer 1

HTML

<div class="table">
  <div class="tr">
    <div class="td"></div>
    <div class="td"></div>
  </div>
  <div class="tr">
    <div class="td"></div>
    <div class="td"></div>
  </div>
</div>

CSS

.table {
  width: 100%;
  display: table;
  border-collapse: collapse;
}
.table .tr {
  display: table-row;
}
.table .td {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

希望这适合你。：）

使用没有tbody的CSS将表转换为div

1 个答案: