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

时间:2017-08-28 06:58:04

标签: html css

我想使用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>

2 个答案:

答案 0 :(得分:0)

您可以使用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>

答案 1 :(得分:0)

正确的方法是:

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