Comment ajouter triangle dans une cellule de tableau

J'ai besoin d'ajouter en haut à droite de triangle dans une cellule.

Comment ajouter triangle dans une cellule de tableau

Comment faire?

J'ai essayé d'ajouter de la durée et de l'icône à l'intérieur de durée, mais il va mal

<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>
  • Pouvez-vous ne pas définir le style='background: url(@Html.ImageContent("triangle")) ... de la position des attributs ... '
  • maintenant, essayez de grâce
  • merci. il a travaillé. veuillez entrer répondre
InformationsquelleAutor Mediator | 2013-01-24
  1. 34

    À l'aide de CSS Triangles:

    En gros, vous avez un 0 hauteur, 0 largeur de l'élément, et l'utilisation des frontières, afin de construire le triangle. Parce que la ligne entre les frontières (par exemple, entre le haut et à gauche) est diagonale, vous pouvez créer agréable à regarder, couleur unie triangles avec elle!

    Voici un Exemple!

    HTML:

    <table border="1">
    <tr>
        <td class="note">Triangle!</td>
        <td>No Triangle!</td>
    </tr>
</table>

    CSS:

    td {
    padding: 20px;
}
.note {
    position: relative;
}
.note:after { /* Magic Happens Here!!! */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0; 
    height: 0; 
    display: block;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-top: 20px solid #f00;
} /* </magic> */

    Avantages:

    • Pas D'Images! - Ce qui signifie, pas de supplément de demande.
    • Aucun Additionnelle! - C'est à dire, de ne pas jeter votre HTML avec unsemantic balisage.
    • Semble bon sur toutes les tailles! - Parce qu'il rend dans le navigateur, il serait un look parfait sur n'importe quelle taille et n'importe quelle résolution.

    Inconvénients:

    • Dépend de pseudo-éléments - ce qui Signifie que les versions antérieures d'internet explorer n'affiche pas le triangle. S'il est important, vous pouvez modifier le CSS un peu, et l'utilisation d'un <span> dans votre code HTML, au lieu de s'appuyer sur :after.
    • remarque:dans FF 18.0.1 le triangle s'affiche dans le coin supérieur droit de la whol epage pas la table-cell.
    • Vous avez fait quelque chose de mal. Avez-vous veillé à ajouter position: relative; sur les éléments réels?
    • je n'ai rien fait j'ai juste essayé votre jsfiddle. ^^
    • Au début, le triangle s'affiche dans le coin supérieur droit de l'ensemble de ma page ainsi, la suggestion d'ajouter un position: relative; sur les éléments réels a fait le tour
    InformationsquelleAutor Madara Uchiha
  2. 1

    Trouve cette question par le biais de Google et a couru dans les questions, donc je vais ajouter ce ici, en dépit de l'âge du post original.

    Madara réponse fonctionne dans la plupart des navigateurs, et fonctionne n'importe où en dehors d'un tableau dans tous les navigateurs. Mais comme mentionné dans les commentaires, l'exemple ne fonctionne pas dans Firefox.

    Il y a un très ancien billet sur le Bugzilla concernant position:absolute; pas de travail dans <td> éléments.

    La principale solution consiste à ajouter une intérieure <div>:

    HTML:

    <table border="1">
<tr>
    <td><div class="note">Triangle!</div></td>
    <td>No Triangle!</td>
</tr>
</table>

    CSS:

    td .note {
    padding: 20px;
}

    jsFiddle exemple

    Je n'ai trouvé qu'il était possible de réaliser sans un intérieur <div>, mais seulement lorsque le <td> était vide, qui n'a probablement pas aidé.

    InformationsquelleAutor TheShrew
  3. 0

    Pour ne le texte de la cellule à l'intérieur de la div-il une bonne idée. mais si vous venez de mettre un div pour la FLÈCHE pas pour le texte. parce qu'il crée des problème lors de l' td a donné la largeur et la hauteur et le texte reste en HAUT avec padding-top:20px;.

    J'ai trouvé une autre solution et testé sur Tous les principaux navigateurs (par exemple: SI et FF ainsi)

    CSS:

    .arrow-right-1 {
  position: absolute;
  top: -1px;
  right: -5px;
  float: right;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  transform: rotate(45deg);
}

td {
  border: solid 1px blue;
  width: 160px;
  height: 100px;
  /* padding: 0px !important; */
  /* vertical-align: top; */
  position: relative;
}

    HTML:

    <table class="table">

  <tbody>
    <tr>
      <td>
        <div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text
      </td>

    </tr>

  </tbody>
</table>

    InformationsquelleAutor Rajan Kumar