Question

我想使用DIVs / CSS模拟经典表格。为了使列排成一行，我似乎需要指定宽度，而不是使用一个表，其中列宽根据内容动态计算。

我将一直添加更多行，因此每次重新优化宽度都很痛苦（对于小屏幕上的用户来说也不是最佳）。

我最好的选择是坚持使用实际的桌子，还是有更好的方法？我需要广泛支持的东西（浏览器/手机/等）。

的CSS：

.chart {
    background-color: green ;
    overflow: hidden ;
}
.row {
    margin-top: 5px ;
    margin-bottom: 5px ;
}
.row:after {
    clear: both ;
    content: "" ;
    display: block ;
}
.date {
    width: 3em ;
    float: left ;
}
.chap {
    width: 20em ;
    float: left ;
}
.cook {
    width: 25em ;
    float: left ;
}

HTML：

<p> looks like a table, but the column-widths are hard-coded, ugh.</p>
<div class=chart>
  <div class=row>
<div class=date><b>date</b></div>
<div class=chap><b>chap</b></div>
<div class=cook><b>cook</b></div>
  </div>
  <div class=row>
<div class=date>1 jan</div>
<div class=chap>intro</div>
<div class=cook>chocolate chip munchies galore</div>
  </div>
  <div class=row>
<div class=date>2 jan</div>
<div class=chap>a really big long chapter</div>
<div class=cook>none</div>
  </div>
</div>

Answer 1

您可以使用display table，table-row和table-cell

.chart {
  display: table;
}

.row {
  display: table-row;
}

.date,
.chap,
.cook {
  display: table-cell;
}

.date,
.chap {
  padding-right: 1em;
}

<p> looks like a table, but the column-widths are hard-coded, ugh.</p>
<div class=chart>
  <div class=row>
    <div class=date><b>date</b></div>
    <div class=chap><b>chap</b></div>
    <div class=cook><b>cook</b></div>
  </div>
  <div class=row>
    <div class=date>1 jan</div>
    <div class=chap>intro</div>
    <div class=cook>chocolate chip munchies galore</div>
  </div>
  <div class=row>
    <div class=date>2 jan</div>
    <div class=chap>a really big long chapter</div>
    <div class=cook>none</div>
  </div>
</div>

Answer 2

正确的方法是：

的CSS：

th {
    text-align: left;
    height: 30%;
}

table {
    width: 100%;
}

HTML：

<table>
   <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
   </tr>
   <tr>
      <th>D</th>
      <th>E</th>
      <th>F</th>
   </tr>
</table>

使表格代码在下面的样式中包含响应：

<div style="overflow-x:auto;">

<table>
</table>

</div>

使用div的/ CSS自动调整“表”中列的宽度

2 个答案: