使用css从ul li建表

Question

I have this piece of html code. This is a list of type UL/LI with span classes inside. I want it to be displayed as a table with boarders and not a list with bullets.

 <ul class="list"> <li> <span class="category">category1</span> <span class="name">Item Title1</span> <span class="price">40 EUR</span> <span class="url"><a href="url1">link to article</a></span> </li> <li> <span class="category">category2</span> <span class="name">item title2</span> <span class="price">55 EUR</span> <span class="url"><a href="url2">link to article</a></span> </li> </ul>

I have tried to write this css but the result is not good.

 .list ul { width: 450px; position: relative; list-style-type: none; margin: 0; padding: 0; } .list ul:before, ul:after { text-align: center; display: block; border: 1px solid black; border-bottom: 0; width: 48%; } .list ul:before { content: 'col1'; border-right: 0; } .list ul:after { content: 'col2'; position: absolute; top: 0; left: 48%; margin-left: 1px; } .list li { text-align: right; width: 48%; float: left; border: 1px solid black; margin-bottom: -1px; } .list li:nth-child(even) { margin-left: -1px; }

 <ul class="list"> <li> <span class="category">category1</span> <span class="name">Item Title1</span> <span class="price">40 EUR</span> <span class="url"><a href="url1">link to article</a></span> </li> <li> <span class="category">category2</span> <span class="name">item title2</span> <span class="price">55 EUR</span> <span class="url"><a href="url2">link to article</a></span> </li> </ul>

Answer 1

One way to achieve this effect is to use CSS Grid .

Right at the very start (and this is normal whenever you want to reformat a list) it's a good idea to begin by applying the following styles to the parent <ul> / <ol> :

• margin-left: 0
• padding-left: 0
• list-style-type: none

This acts as a very basic reset to the way either of these types of list are normally displayed.

Working Example:

 .list { display: grid; grid-template-columns: 180px 180px; width: 360px; margin-left: 0; padding-left: 0; border: 1px solid rgb(0, 0, 0); list-style-type: none; } .list li { width: 180px; border: 1px solid rgb(0, 0, 0); box-sizing: border-box; } .list li span { display: block; padding: 6px 9px; border: 1px solid rgb(0, 0, 0); } .list li span.category { font-weight: bold; text-align: center; text-transform: uppercase; }

 <ul class="list"> <li> <span class="category">Category 1</span> <span class="name">Item Title 1</span> <span class="price">40 EUR</span> <span class="url"><a href="url1">Link to Article</a></span> </li> <li> <span class="category">Category 2</span> <span class="name">Item Title 2</span> <span class="price">55 EUR</span> <span class="url"><a href="url2">Link to Article</a></span> </li> </ul>

Answer 2

You are styling a list inside an element with the list class instead of the list itself here:

.list ul {
    width: 450px;           
    position: relative;

    list-style-type: none;
    margin: 0;
    padding: 0;
}

If you add a .list element outside the list, or refactor the style to point the list itself you'll be pointed in the right direction.

This piece, for example, will work with the following modification:

.list {
    width: 450px;           
    position: relative;

    list-style-type: none;
    margin: 0;
    padding: 0;
}

Or you can also alter the html:

<div class="list">
<ul>
<li>
<span class="category">category1</span>
<span class="name">Item Title1</span> 
<span class="price">40 EUR</span>
<span class="url"><a href="url1">link to article</a></span>
</li>   
<li>
<span class="category">category2</span>
<span class="name">item title2</span> 
<span class="price">55 EUR</span>
<span class="url"><a href="url2">link to article</a></span>
</li>   
</ul>
</div>

Answer 3

 <table border="1"> <tr> <td class="category">category1</td> <td class="name">Item Title1</td> <td class="price">40 EUR</td> <td class="url"><a href="url1">link to article</a></td> </tr> <tr> <td class="category">category2</td> <td class="name">item title2</td> <td class="price">55 EUR</td> <td class="url"><a href="url2">link to article</a></td> </tr> </table>

Answer 4

I didn't manage to build a correct table from this html piece. Instead I generated a table and managed to use list.js to filter the content. This achieved what I wanted to do.