responsive table-solution

switch a table partially into a list based on live-data with their classes and structure

HTML

<!-- 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&nbsp;P1
            </td>
            <td class="parameterValue">
                height
            </td>
            <td class="parameterValue">
                94.50 m
            </td>
            <td class="parameterValue">
                94.50 m
            </td>
        </tr>
        <tr>
            <td class="groupTitle groupTitleFirst">
               ...

CSS

/* only this is nedded */
td:not(:first-child) {display: list-item; margin-left: 0; padding-left: 0;list-style-type: none;}


/* ---- 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;}
    /* any colons wanted? */
    td:nth-child(2):after {content: ":"; }

    /* ---- a little styling ----- */
    td:first-child {padding: 5px 20px 0 0;}
    td:nth-child(2),
    td:nth-child(3) {float: left; padding-top: 5px;}
}