如何在通过div元素构建的表中嵌套枚举？

Question

我想在div元素的基础上构建一个表格。在表中，我想显示订购编号的组和子组。我想通过CSS3样式来完成它。

我的代码：

div{ 
 
    border-width:0; 
 
} 
 
.table, .group, .row, .column1, .column2{ 
 
    border-style:solid; 
 
    border-color:black; 
 
} 
 

 
.table{ 
 
    border-width:0 1px 1px 1px; 
 
} 
 

 
.group, .group .row { 
 
    border-top-width:1px; 
 
} 
 

 
.row .row{ 
 
    border-bottom-width:1px; 
 
} 
 

 
.row{ 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 

 
.column1{ 
 
    border-right-width:1px; 
 
    flex-basis: 30%; 
 
} 
 

 
.column2{ 
 
    flex-basis: 1; /* take remaining space */ 
 
} 
 

 
.column1, .column2{ 
 
    text-align:left; 
 
} 
 

 
.group{ 
 
    text-align:center; 
 
} 
 

 
.title{ 
 
    background-color:gray; 
 
}

<div class="table"> 
 
    <div class="group"> 
 
    <div class="title">Colors</div> 
 
    <div class="row"> 
 
     <div class="column1">I like it</div> 
 
     <div class="column2">Red</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">I like it more</div> 
 
     <div class="column2">Green</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">This is nice too</div> 
 
     <div class="column2">Blue</div> 
 
    </div> 
 
    </div> 
 
    <div class="group"> 
 
    <div class="title">Hardware</div> 
 
    <div class="row"> 
 
     <div class="column1">Good choice</div> 
 
     <div class="column2">Display</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Yes</div> 
 
     <div class="column2">Keyboard</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Ok</div> 
 
     <div class="column2">mouse</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Good device</div> 
 
     <div class="column2">videocard</div> 
 
    </div> 
 
    </div> 
 
</div>

我如何通过CSS3样式做这种计算法？谢谢。

Answer 1

您可以使用CSS Counter

.table { 
    counter-reset: section;       /* reset "section" counter */ 
} 
.group { 
    counter-increment: section;      /* increment "section" counter */ 
    counter-reset: item;        /* reset "item" counter */ 
} 
.group .title::before { 
    content: counter(section) ". ";     /* output "item" counter */ 
} 
.group > div > div:nth-child(1)::before { 
    counter-increment: item;       /* increment "item" counter */ 
    content: counter(section) "." counter(item) "." ; /* output "item" counter */ 
} 

栈片断

div{ 
 
    border-width:0; 
 
} 
 
.table, .group, .row, .column1, .column2{ 
 
    border-style:solid; 
 
    border-color:black; 
 
} 
 

 
.table { 
 
    counter-reset: section; 
 
} 
 
.group { 
 
    counter-increment: section; 
 
    counter-reset: item; 
 
} 
 
.group .title::before { 
 
    content: counter(section) ". "; 
 
} 
 
.group > div > div:nth-child(1)::before { 
 
    counter-increment: item; 
 
    content: counter(section) "." counter(item) "." ; 
 
} 
 

 

 
.table{ 
 
    border-width:0 1px 1px 1px; 
 
} 
 

 
.group, .group .row { 
 
    border-top-width:1px; 
 
} 
 

 
.row .row{ 
 
    border-bottom-width:1px; 
 
} 
 

 
.row{ 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 

 
.column1{ 
 
    border-right-width:1px; 
 
    flex-basis: 30%; 
 
} 
 

 
.column2{ 
 
    flex-basis: 1; /* take remaining space */ 
 
} 
 

 
.column1, .column2{ 
 
    text-align:left; 
 
} 
 

 
.group{ 
 
    text-align:center; 
 
} 
 

 
.title{ 
 
    background-color:gray; 
 
}

<div class="table"> 
 
    <div class="group"> 
 
    <div class="title">Colors</div> 
 
    <div class="row"> 
 
     <div class="column1">I like it</div> 
 
     <div class="column2">Red</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">I like it more</div> 
 
     <div class="column2">Green</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">This is nice too</div> 
 
     <div class="column2">Blue</div> 
 
    </div> 
 
    </div> 
 
    <div class="group"> 
 
    <div class="title">Hardware</div> 
 
    <div class="row"> 
 
     <div class="column1">Good choice</div> 
 
     <div class="column2">Display</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Yes</div> 
 
     <div class="column2">Keyboard</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Ok</div> 
 
     <div class="column2">mouse</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="column1">Good device</div> 
 
     <div class="column2">videocard</div> 
 
    </div> 
 
    </div> 
 
</div>