如何使用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;
}

有些州没有被放置在他们自己的牢房中，有些甚至被分成两个不同的牢房。例如，我的网站将德克萨斯州犹他州显示为一个单元而不是两个不同的单元格，而北达科他州正在被包裹，因此它位于两个不同的单元而不是一个单元。我希望最终结果是四列，一个状态在另一个上面，每列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>
    

Answer 2

您的代码存在一些问题：

• disply:table应为display:table

• 如果你有一个display:table，如果在display:table-caption下方display:table，则会覆盖a

• 您在同一行获得两种状态，因为display:inline默认设置为display:block，因此您需要设置为/*table { border-spacing: 30px 10px; border-collapse: separate; text-align: center; } * this wasn't included in your HTML */ a:link { color: limegreen; background-color: transparent; text-decoration: underline; display: block; } a:visited { color: orange; background-color: transparent; text-decoration: underline; } #colwrap { display: table; width: 100% /*demo purposes */ } .cols { display: table-cell; width: 25% /*demo purposes */ } /*demo purposes below */ #col1 { background-color: blue; } #col2 { background-color: red; } #col3 { background-color: green; } #col4 { background-color: yellow; }

• 您使用的是ID（可以），但是出于CSS目的（在这种情况下），最好的方法是使用类。

  所以请看下面的代码段：

＆＃13;

＆＃13;

<div id="colwrap">
  <div class="cols" id="col1">
    <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>
  <div class="cols" 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>
  <div class="cols" id="col3">
    <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>
  <div class="cols" id="col4">
    <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>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;