html - 如何使用 CSS 在表格的每个单元格中获取一个值？

Question

我对 html/css 非常陌生，所以请简化您的回答:)。我正在构建一个包含 4 列的表。我有整个表格的 div 和每个单独列的 div。这是 html 中一列的示例:

<div id="col2">
            <a href="stateunavailable.html">Indiana</a>
            <a href="stateunavailable.html">Iowa</a>
            <a href="stateunavailable.html">Kansas</a>
            <a href="stateunavailable.html">Kentucky</a>
            <a href="stateunavailable.html">Louisiana</a>
            <a href="stateunavailable.html">Maine</a>                               
            <a href="stateunavailable.html">Maryland</a>                               
            <a href="stateunavailable.html">Massachusetts</a>
            <a href="stateunavailable.html">Michigan</a>
            <a href="stateunavailable.html">Minnesota</a>                               
            <a href="stateunavailable.html">Mississippi</a>
            <a href="stateunavailable.html">Missouri</a>                               
            <a href="stateunavailable.html">Montana</a>                                             </div>

下面是表格的CSS代码:

table {
    border-spacing: 30px 10px;
    border-collapse: separate;
    text-align: center;
}
a:link {
    color:limegreen;
    background-color:transparent;
    text-decoration: underline
        }
a:visited {
    color:orange;
    background-color: transparent;
    text-decoration: underline;
            }

#colwrap {
    disply: table;
    display:table-caption;
}

#col1 {
    display: table-cell;
}

#col2 {
    display: table-cell;
}

#col3 {
    display: table-cell;
}

#col4 {
    display: table-cell;
}

有些状态没有被放置在它们自己的单元格中，有些甚至被分成两个不同的单元格。例如，我的网站将 Texas Utah 显示为一个单元格而不是两个不同的单元格，而 North Dakota 则被包裹在两个不同的单元格而不是一个单元格上。我希望最终结果为四列，一个状态在另一个之上，每列 12-13 个状态。

Answer 1

从您的 html 片段来看，您似乎没有将每个州划分到它自己的单元格 (div) 中。您在一个单元格中有一整列状态。

我会建议你看看basic html tables ，不是因为您需要使用它们(您当然可以用 div 构建表格)，而是因为它应该让您了解如何分解 html。下面的一个简单示例可以帮助您理解我的意思:

<div id="my-table">
  <div class="row">
    <div class="cell"><a href="link">State</a></div>
    <div class="cell">State</div>
    <div class="cell">State</div>
    <div class="cell">State</div>
  </div>
  <div class="row">
    <div class="cell">State</div>
    <div class="cell">State</div>
    <div class="cell">State</div>
    <div class="cell">State</div>
  </div>
</div>