CODEWITHSUNDEEP
htmlcsslisthtml-table
CloudAnywhere
CloudAnywhere

Reputation: 759

use css to build a table from ul li

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>

Upvotes: 0

Views: 4526

Answers (4)

CloudAnywhere
CloudAnywhere

Reputation: 759

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.

Upvotes: 0

Rounin
Rounin

Reputation: 29463

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>

Upvotes: 2

RK12
RK12

Reputation: 472

  
    <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>

Upvotes: 1

Mar&#237;a Antignolo
Mar&#237;a Antignolo

Reputation: 414

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>

Upvotes: 0

Related Questions