Hauteur de la bordure sur CSS

Question

J'ai un tableau TD et je veux ajouter une bordure d'un pixel à sa droite, c'est ce que j'ai fait :

table td {
    border-right:1px solid #000;
}

Cela fonctionne bien mais le problème est que la hauteur de la bordure prend la hauteur totale du TD.

Existe-t-il un moyen de définir la hauteur de la bordure ?

Answer 1

J'ai une autre possibilité. Il s'agit bien sûr d'une technique "plus récente", mais pour mes projets, elle est suffisante.

Cela ne fonctionne que si vous avez besoin d'une ou deux bordures. Je ne l'ai jamais fait avec 4 bordures... et pour être honnête, je ne connais pas encore la réponse à cette question.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

J'espère que cela vous aidera aussi, car pour moi, il s'agit d'une solution de contournement facile.

Answer 2

Non, il n'y en a pas. La bordure sera toujours aussi haute que l'élément.

Vous pouvez obtenir le même effet en enveloppant le contenu de la cellule dans une balise <span> et d'y appliquer des styles de hauteur et de bordure. Ou en dessinant une courte ligne verticale dans un PNG de 1 pixel de large à la hauteur correcte, et en l'appliquant comme arrière-plan à la cellule :

background:url(line.png) bottom right no-repeat;

Answer 3

Oui, vous pouvez définir la hauteur de la ligne après avoir défini la bordure comme ceci :

border-right: 1px solid;
line-height: 10px;

Answer 4

Pour les éléments td, la hauteur de ligne vous permettra de redimensionner la hauteur de la bordure comme l'a mentionné SPrince.

Pour les autres éléments, tels que les éléments de liste, vous pouvez contrôler la hauteur de la bordure avec line-height et la hauteur de l'élément lui-même avec margin-top et margin-bottom.

Voici un exemple fonctionnel des deux : http://jsfiddle.net/byronj/gLcqu6mg/

Un exemple avec des éléments de liste :

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

Answer 5

Non, vous ne pouvez pas définir la hauteur de la bordure.