JSFiddle - React, Tailwind, and code Playground

by Netsurfer

HTML

<body>
    <h1>Demo Tabellen-Layout mit Info-Box</h1>
    <div id="wrapper">
        <ul>
            <li>
                    <span>Whg-Nr.</span>
                    <span>Etage</span>
                    <span>Gr&ouml;sse</span>
                    <span>Fl&auml;che</span>
                    <span>Terrasse</span>
                    <span>Balkon</span>
                    <span>Verkauspreis</span>
                    <span>Status</span>
            </li>
            <li>
                <a href="http://uedlige.dramatik.ch/media/pdf/Dok1.pdf">
                    <span>1.5</span>
                    <span>Attika</span>
                    <span>5.5</span>
                    <span>179 m<sup>2</sup></span>
                    <span>100 m<sup>2</sup></span>
                    <span>12 m<sup>2</sup></span>
                    <span>750'000.00</span>
                    <span>reserviert</span>
                </a>
                <img width="330" height="550" src="http://uedlige.dramatik.ch/media/hoverbox/hoverbild-2.jpg" alt="infobox" />
            </li>
            <li>
                <a href="http://uedlige.dramatik.ch/media/pdf/Dok1.pdf">
                    <span>1.5</span>
                    <span>Attika</span>
                    <span>5.5</span>
                    <span>179 m<sup>2</sup></span>
                    <span>100 m<sup>2</sup></span>
                    <span>12 m<sup>2</sup></span>
                    <span>750'000.00</span>
                    <span>reserviert</span>
                </a>
                <img width="330" height="550" src="http://uedlige.dramatik.ch/media/hoverbox/hoverbild-2.jpg" alt="infobox" />
            </li>
            <li>
                <a href="http://uedlige.dramatik.ch/media/pdf/Dok1.pdf">
                    <span>1.5</span>
                    <span>Attika</span>
                    <span>5.5</span>
                    <span>179 m<sup>2</sup></span>
                    <span>100 m<sup>2</sup></span>
        ...

CSS

html, body {height: 100%; width: 100%;}
body {overflow-y: scroll;}
#wrapper {position: relative; height: 606px; min-width: 1020px; max-width: 1020px; margin: 10px auto; border: 1px solid #333;}
#imgage-heading {position: absolute; top: 0; left: 0; height: 32px; width: 340px; padding: 4px 5px 3px; color: #EEE; background-color: #236A9E; border-bottom: 1px solid #666; font-weight: bold; line-height: 32px; text-align: center;}
ul {display: table; margin-left: 350px; table-layout: fixed; border-collapse: collapse; background-color: #FCC; border-bottom: 1px solid #333;}
li {display: table-row-group; background-color: #FFF;}
li:nth-child(odd) {background-color: #E4E4E4;}
li:first-child {display: table-header-group; color: #EEE; background-color: #236A9E; font-weight: bold; line-height: 32px;}
li a {display: table-row; text-decoration: none;}
span {display: table-cell; width: 83px; padding: 3px 5px; border-top: 1px solid #666; text-align: center;}
li img {display: none; position: absolute; top: 46px; left: 10px; box-shadow: 3px 3px 10px -2px rgba(0,0,0,0.75);}

a:hover + img {display: block;}
li:hover a {background-color: #ABCDE5;}