Question

我正在尝试创建不使用表格标签的定价表。

请找到以下示例代码，

<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey"><ul class="price">
        <li class="grey">$ 9.99 / year</li>
                <li class="grey">$ 9.99 / year</li>
    </ul></li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

我的问题是行线（单元格高度不均匀）不合适。例如，如果基本的第一个单元格具有更高的值，则单元格的高度会增加，因此另一个单元格的高度甚至都不是

Answer 1

我通常倾向于使用CSS Grid。它使您具有进行更改的更多能力，并且更加干净。如果您想尝试的话；在文件中包含以下CSS行：

#priceTable{
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: 200px;
}

这将为页面左下角的表格设置样式。因此，您还可以将最后一个包装div之前的包装div更改为以下内容：

<div class="columns">
  <ul class="price" id="priceTable">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

创建价格表而不在HTML设计中使用表

1 个答案: