0
votes

utiliser css pour créer une table à partir de ul li

J'ai ce morceau de code html. C'est une liste de type UL / LI avec des classes span à l'intérieur. Je veux qu'il soit affiché comme un tableau avec des pensionnaires et non comme une liste avec des puces.

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

J'ai essayé d'écrire ce css mais le résultat n'est pas bon.

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

html css list html-table

4 commentaires

Est-ce que cela répond à votre question? stackoverflow.com/a/13825418/2358409

Est-ce que cela répond à votre question? table ul avec cellule de table li

Pourquoi ne pas en faire simplement une

J'essaye d'utiliser listjs.com pour filtrer et trier les listes. Les échantillons sont fabriqués avec UL / LI.

4 Réponses :

0
votes

Vous êtes coiffé une liste à l'intérieur d'un élément avec la classe de liste au lieu de la liste elle-même ici: xxx pré>

si vous ajoutez un élément de liste d'accès à l'extérieur de la liste, ou refacteur du style au point de point la liste elle-même vous sera pointée dans la bonne direction. P>

Cette pièce, par exemple, fonctionnera avec la modification suivante: p> xxx pré>

ou vous Peut également modifier le HTML: P>

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

1 commentaires

Je peux 'modifier

1
votes

Une façon d'obtenir cet effet est d'utiliser CSS Grid .

Dès le début (et c'est normal chaque fois que vous souhaitez reformater une liste), c'est une bonne idée de commencer par appliquer les styles suivants au parent

/ :

marge gauche: 0
padding-left: 0
type-style-liste: aucun

Ceci agit comme une réinitialisation très basique de la façon dont l'un ou l'autre de ces types de liste est normalement affiché.

Exemple de travail:

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

.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;
}

4 commentaires

Cela ne produit pas le résultat que je souhaite. Si je crée une troisième entrée, cela crée 1 ligne avec 2 colonnes et une deuxième ligne. Chaque LI doit devenir une seule ligne.

plus exactement, chaque

doit devenir 1 ligne, chaque doit devenir 1 colonne.

Mais maintenant que vous connaissez les bons outils (l'un d'eux, en tout cas - l'autre est les Tableaux CSS ), vous pouvez apprendre et expérimenter et obtenir le résultat souhaité.

Si vous voulez apprendre CSS Grid , je vous recommande fortement à la fois: CSS Grid Garden et < a href = "https://css-tricks.com/snippets/css/complete-guide-grid/" rel = "nofollow noreferrer"> Un guide complet de la grille par CSS Tricks .

0
votes

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

2 commentaires

pourrait être bien si je pouvais filtrer et trier.

Utilisez datatables.net (Jquery Datatable) pour trier et filtrer et pour un meilleur affichage des tableaux.

0
votes

Je n'ai pas réussi à construire une table correcte à partir de ce morceau html. Au lieu de cela, j'ai généré une table et j'ai réussi à utiliser list.js pour filtrer le contenu. Cela a réalisé ce que je voulais faire.

0 commentaires