web-dev-qa-db-fra.com

Hauteur de la bordure sur CSS

J'ai un tableau TD et à droite de celui-ci, je veux ajouter une bordure de 1 pixel. J'ai donc fait ceci:

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

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

Existe-t-il un moyen de définir la hauteur de la frontière?

htmlcsscss3
46
Satch3000

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 encapsulant le contenu de la cellule dans un <span> et en lui appliquant des styles hauteur/bordure. Ou en traçant une courte ligne verticale dans un fichier PNG de 1 pixel de large (hauteur correcte) et en l'appliquant en tant qu'arrière-plan de la cellule:

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

J'ai une autre possibilité. Ceci est bien sûr une technique "plus récente", mais pour mes projets fonctionne suffisamment.

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

.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 aide aussi, quant à moi, c'est une solution de contournement facile.

56
ReBa

Oui, vous pouvez définir la hauteur de ligne après avoir défini la bordure de la manière suivante:

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

Pour les éléments td, la hauteur de ligne vous permettra de redimensionner la hauteur de la bordure comme indiqué par SPrince. 

Pour d'autres éléments tels que les éléments de liste, vous pouvez contrôler la hauteur de la bordure avec la hauteur de ligne et la hauteur de l'élément réel avec les marges supérieure et inférieure. 

Voici un exemple pratique 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>
6
Byron

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

4
Headshota
table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Ensuite, avec votre code, vous pouvez:

<td class="rightborder">whatever</td>

J'espère que cela pourra aider!

1
Roy

Cela ajoutera une bordure centrée à la gauche de la cellule qui correspond à 80% de la hauteur de la cellule. Vous pouvez référencer la documentation complète border-image ici.

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
0
cambthompson

Actuellement, non, non sans avoir recours à la tromperie. les bordures des éléments sont supposées couvrir toute la longueur de n'importe quel côté de la zone d'éléments auxquelles elles s'appliquent.

0
cdeszaq

S'appuyant sur la réponse de @ ReBa ci-dessus, cette classe custom-border est ce qui a fonctionné pour moi.

Mods:

  • travailler avec borderau lieu debackaground-color puisque background-color n'est pas cohérent.
  • Définir height & top des propriétés de :after de telle sorte que le total atteigne 100% où la valeur de bottom soit implicit.

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}
<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Bonne chance...

0
Akash

Comme tout le monde l'a dit, vous ne pouvez pas contrôler la hauteur de la frontière. Mais il existe des solutions de contournement, voici ce que je fais:

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

Vous pouvez définir height sur inherit pour la hauteur de la table ou calc(inherit - 2px) pour une bordure plus petite de 2 pixels. N'oubliez pas que inherit n'a aucun effet lorsque la hauteur de la table n'est pas définie.

Utilisez height: 50% pour une demi-bordure.

Démo

0
Simon Sand
.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

// trace une ligne sur le côté droit de la boîte . ajouter plus tard une marge en haut et une marge en bas .

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

Cela peut aider à tracer une ligne sur le côté droit de la boîte avec un espace en haut et en bas.

0
manjunath vb