/* any colons wanted? */ td:nth-child(2):after {content: ":"; } /* ---- a little styling ----- */ td:first-child {padding: 5px 0 0 0;} td:nth-child(2), td:nth-child(3) {float: left; } td:nth-child(3) {padding: 10px 0 0 0;} /* ---- a little styling ----- */ td:nth-child(2) {color: #a20000; } td:nth-child(3) {margin-left: 20px; } /* ------ a little more styling -------- */ table {width: 100%} /* for oldIE: .subsectionTitle */ td[colspan] { background: #a20000; color: #fff; padding: 10px 0; text-align: center; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0,0,0,0.75);} /* for oldIE: .groupTitle + td */ td:nth-child(2) {padding-top: 10px;} /* basics */ html {padding: 20px 0; background-color: #efefef;} body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;} /* ------- especially for smartphones -------- */ @media only screen and (max-width: 480px) { body {font-size: 12px;} /* only this is nedded */ td:not(:first-child) {display: list-item; float: none; margin-left: 0; padding: 0;list-style-type: none;} td:nth-child(2) {padding: 10px 0 0 0;} }
<!-- Code and classes are from a living project --> <table class="expandedContent"> <tbody> <tr> <td colspan="3" class="subsectionTitle"> dimensions </td> </tr> <tr> <td class="groupTitle groupTitleFirst noPadding"></td> <td class="parameterValue"> total length </td> <td class="parameterValue"> 2 460 m </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> deck </td> <td class="parameterValue"> deck depth </td> <td class="parameterValue"> 4.20 m </td> </tr> <tr> <td class="groupTitle noPadding"></td> <td class="parameterValue"> height above valley floor or water </td> <td class="parameterValue"> 270 m </td> </tr> <tr> <td class="groupTitle noPadding"></td> <td class="parameterValue"> total width </td> <td class="parameterValue"> 32.050 m </td> </tr> <tr> <td class="groupTitle noPadding"></td> <td class="parameterValue"> longitudinal slope </td> <td class="parameterValue"> 3.025 % </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> pier P1 </td> <td class="parameterValue"> height </td> <td class="parameterValue"> 94.50 m </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> pier P2 </td> <td class="parameterValue"> height </td> <td class="parameterValue"> 244.96 m </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> pier P3 </td> <td class="parameterValue"> height </td> <td class="parameterValue"> 221.05 m </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> pier P4 </td> <td class="parameterValue"> height </td> <td class="parameterValue"> 144.21 m </td> </tr> <tr> <td class="groupTitle groupTitleFirst"> pylons </td> <td class="parameterValue"> pylon height (above deck) </td> <td class="parameterValue"> 88.92 m </td> </tr> <tr> <td class="groupTitle noPadding"></td> <td class="parameterValue"> pylon height (above ground) </td> <td class="parameterValue"> max. 343 m </td> </tr> </tbody> </table>