CSS Border mitten in der Tabelle um 1px versetzt

[Hendoul]

Hi

Kann mir jemand sagen, woher dieser kleine Versatz vom Border herkommt bei Column 2? Und wie ich das beheben kann?
Eine Möglichkeit wäre den Border auf dem thead zu definieren anstatt auf den th's:

table thead {
    border-bottom: 1px solid red;
}

Das fällt aber wohl erstmal weg, da das Styling sehr zentral definiert ist und ich nicht alle Tabellen in der Applikation überprüfen kann auf die Schnelle, ob das überall noch funktionieren würde.

Gibt es noch einen anderen Ansatz?


https://jsfiddle.net/GarfieldKlon/q87rb5ho/

 

[Yuuri]

Welcher Versatz?

 

[Departet]

Keine Lösung aber wenn ich display:flex raus nehme klappt alles. Liegt also irgendwo an dem div.

 

[Rodelkoenig]

Welcher Versatz?

Anhang anzeigen 1047065

Bei Chrome sieht man bei der Border einen kleinen Absatz links und recht bei Column 2.

Wenn du deine Klasse in ein Wrapper-Div packst klappt es bei mir:

<th>
    <div class="foo">
        <div>Column 2</div>
        <div>Icon</div>
    </div>
</th>

 

[Joshinator]

Der Versatz

Problem ist folgendes:

• th Elemente stehen standardmäßig auf "display: table-cell"
• du sagst .foo soll "display: flex" sein
• .foo ist jetzt flex und verliert alle table-cell Eigenschaften, das wird wohl zu dem Pixel führen

Wie oben gesagt wurde, Wrapper-Element damit das th weiterhin table-cell bleiben kann.

Edit: kurioserweise geht aber folgendes: statt border-collapse: collapse; einfach border-spacing: 0; benutzen. Dann hast du auch kein Platz zwischen den Zellen und es gibt den Absatz trotz flex nicht mehr.

 

[Yuuri]

Browser	100%	300%
Edge Canary (90.0.808.0)
Chrome Canary (90.0.4427.5)
Edge Dev (90.0.803.0)
Edge (88.0.705.74)
Firefox Nightly (88.0a1)

Fixen würde ich da nichts, ist halt ein Browserproblem und wird demnächst behoben.

Weiterhin border'st du einzelne Zellen. Wenn du ne einheitliche Border haben willst, musst du dein fehlendes tr stylen. Ja, ein thead benötigt genauso ein tr.

https://jsfiddle.net/wsr516by/

Browser	100%	300%
Edge (88.0.705.74)

 

[ger.ruler]

Spricht was dagegen statt den inline-divs direkt ein span zu benutzen ?! spart den wrapper und das css

    <th>Column 1</th>
    <th >
        <span class="bar1">Column 2</span>
        <span class="bar2">Icon</span>
    </th>

Das Problem ist, dass du im Ursprungscode die auto-alignment Eigenschaften von table-cell/table-row überschreibst mit display:flex..... Damit steht die Zelle alleine und passt sich dem nächstgrößten Element an, was wahrscheinlich dein blanko div-wrapper ist.... kannst ja mal herumspielen und das div kompensieren mit der property margin-bottom: -1px

.foo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -1px
}

 

[Hendoul]

Danke für die Erklärungen
Habe es mit dem Div-Wrapper gelöst.