Elemente mit einem Border können einfach per CSS aneinander gereiht werden. Jedoch wird das ganze etwas schwieriger, wenn die Border dieser Elemente sich überlappen sollen. Aber mit der Überlappung ist ein einheitliches Aussehen der Border über alle Elemente möglich.
Der älteste Lösungsansatz dieses Problem zu lösen, ist über das table-Tag. Der Vorteil besteht darin das table schon nativ Collapsed-Border unterstützen. Wobei hierbei nur sehr wenig CSS notwendig ist. Aber vom Standpunkt der Semantik her sollte eine Lösung per table nicht mehr in Betracht gezogen werden. Trotzdem stelle ich hier zur Vollständigkeit eine Lösung per table vor:
[demo project=”collapsed-borders-table”]
Zur Strukturierung der Inhalte sollte also das table nicht mehr genutzt werden. Alternativ könnte ein div benutzt werden, jedoch kann das border-collapse: collapse; nur auf table oder display: table;/display: inline-table; angewendet werden. Jedoch würden ich damit nur wieder die selbe Anzahl an Elementen wie bei einer table erzeugen müssen. Ich möchte hier aber das HTML nicht noch weiter aufblähen. Aus diesem Grund möchte ich eine Lösung mit einem Wrapper vorstellen:
[demo project=”collapsed-borders-div-wrapper”]
Bei einer Lösung mit einem Wrapper haben die einzelnen Elemente nur Border auf der rechten und unteren Seite. Der Wrapper hat dabei nur einen Border auf der oberen und linken Seite. Mit dieser Lösung wird jedoch nur die Illusion eines Collapsed-Border erzeugt. Wichtig ist dabei noch eine feste Breite des Wrappers festzulegen, welches ein vielfaches der Breite eines einzelnen Elements ist.