it-swarm.com.de

Wie man span bekommt, um die volle Höhe des enthaltenden td einzunehmen

Ich habe eine Tabelle und möchte in der linken Spalte einen Indikator für die Zeile hinzufügen. Ich verwende einen Span, um den Indikator zu rendern, aber ich kann den Span nicht dazu bringen, die volle Höhe einzunehmen:

<table>
    <tr>
        <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;">&nbsp;</span></td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

Der Tisch hat eine Polsterung von 15px, also entferne ich für die Indikatorspalte die Polsterung und setze die Spanne auf Höhe: 100%:

td {padding:15px;}
table {background-color: yellow;}

Diese Geige zeigt, dass es gerade läuft -, dass der rosa Balken die gesamte Höhe des enthaltenden TD überspannen muss.

Wie mache ich das? Beachten Sie, dass ich das Styling nicht auf dem td anstatt auf dem span einstellen kann, da dies andere Probleme mit dem Rendering verursacht (es versetzt den border-bottom der th Zeilen, wenn ich das mache).

16
Matt Roberts

Überlauf hinzufügen: automatisch zum Bereich (und Anzeige: natürlich blockieren)

<table>
   <tr>
      <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;display:block;overflow:auto">&nbsp;</span></td>
      <td>Some content</td>
      <td>Some more content</td>
  </tr>
</table>
12
Jaay

Den <span> brauchen Sie dort nicht. Alles, was Sie brauchen, ist, right und leftpadding auf 0 zu setzen, so dass Ihr farbiger Zeilenindikator nur 5 Pixel breit ist und u und der Abstand der oberen und unteren Auffüllung 15 wie in den anderen Zellen den Hintergrund belässt Die Farbe deckt die gesamte Höhe der Zelle/Zeile ab.

HTML

  <table>
    <tr>
        <td class="rowindicator">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

CSS

    table{background: yellow;}
    td{padding:15px;}
    .rowindicator{
         width:5px;                       
         padding-right:0px;  
         padding-left:0px;                       
         background-color:pink;
    }

Demo: http://jsfiddle.net/mNjsb/34/

3
Ms. Nobody
span{
    display: inline-block;
    margin: 0;
}

Das wird funktionieren.

1
Alex Fang

Ich hatte das gleiche problem Ich habe verschiedene Optionen ausprobiert.

Ich habe eine echte Lösung gefunden hier . Es ist ein Trick, aber es funktioniert WIRKLICH .

table td{
    position: relative;
}

table td span{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
1
J.BizMai

Vielleicht fehlt mir hier etwas, aber wenn Sie nur das span-Element verwenden, um die Farbe der Zelle anzugeben, warum setzen Sie nicht einfach die Hintergrundfarbe der Zelle auf rosa?

<html>
<head>
<style>
td {padding:15px;}
table {background-color: yellow;}
</style>
</head>
<body>
<table>
    <tr>
        <td style="padding:0px;width:5px; background-color:pink">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>
</body>
</html>
1
ElPedro

Was du tust, stimmt nicht. Es wird nicht als bewährte Methode angesehen, Elemente nur zu Gestaltungszwecken hinzuzufügen, insbesondere wenn diese Elemente leer sind. Erwägen Sie, das erste td zu entfernen, und tun Sie dies stattdessen

td:first-child{
    border-left:4px solid pink
}

hier ist ein jsfiddle: http://jsfiddle.net/mNjsb/16/

edit: aber wenn Sie darauf bestehen, ist span ein Inline-Element. das bedeutet, dass Sie hinzufügen müssen

display: inline-block

wenn Sie es mit Höhe und Whatnot gestalten möchten

0
skzryzg

Aus irgendeinem Grund führt das Hinzufügen der Auffüllung zur Tabellenzelle dazu, dass die 100% -Höhe "bricht".

Um dies zu umgehen, fügen Sie den Tabellenzellen eine "Dummy-Höhe" hinzu:

td {padding:15px; height: 5px;}

Dies natürlich zusätzlich zum Blockelement:

<div style="height:100%; width:5px; background-color:pink;">&nbsp;</div>

Live Testfall .

0
Shadow Wizard

span ist ein Inline-Element. Um die volle Höhe zu erreichen, müssen Sie display: block; hinzufügen oder anderweitig das Blockebenenelement <div> verwenden.

0
Ganesh Bora