响应式表格3

HTML

<table id="iseqchart" width="100%">
    <tr>
        <th id="index">Index</th>
        <th id="value">Value</th>
        <th id="change">Change</th>
        <th id="changepercent">Change %</th>
        <th id="yhigh">Year High</th>
        <th id="ylow">Year Low</th>
        <th id="dhigh">Daily Low</th>
        <th id="dlow">Daily High</th>
        <th id="turnover">Turnover €(Mil.)</th>
    </tr>
    <tr>
        <td>ISEQ® Overall</td>
        <td>2,725.99</td>
        <td class="neg">-15.30</td>
        <td class="neg">-0.56%</td>
        <td>3,037.89</td>
        <td>2,333.35</td>
        <td>2,712.84</td>
        <td>2,743.31</td>
        <td>24.00</td>
    </tr>
    <tr>
        <td>ISEQ® Financial</td>
        <td>130.77</td>
        <td class="neg">-3.24</td>
        <td class="neg">-2.42%</td>
        <td>493.83</td>
        <td>101.54</td>
        <td>130.43</td>
        <td>136.14</td>
        <td>2.76</td>
    </tr>
    <tr>
        <td>ISEQ® General</td>
        <td>3,751.79</td>
        <td class="neg">-17.49</td>
        <td class="neg">-0.46%</td>
        <td>4,146.84</td>
        <td>3,188.68</td>
        <td>3,731.15</td>
        <td>3,770.88</td>
        <td>21.24</td>
    </tr>
    <tr>
        <td>ISEQ® Small Cap.</td>
        <td>1,661.94</td>
        <td class="pos">3.76</td>
        <td class="pos">0.23%</td>
        <td>2,175.60</td>
        <td>1,633.21</td>
        <td>1,643.92</td>
        <td>1,661.94</td>
        <td>0.20</td>
    </tr>
</table>
					    

CSS

#iseqchart {
    border: 1px solid #000;
    border-collapse: collapse;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    text-align: right;
}
#iseqchart th {
    border: 1px solid #333;
    padding: 3px 6px;
}
#iseqchart td {
    border: 1px solid #999;
    padding: 3px 6px;
}
.neg { color: red; }
.pos { color: green; }

@media only screen and (max-width: 768px) {
#turnover, tr td:nth-child(9) {
    display: none;
    visibility: hidden;
}
}

@media only screen and (max-width: 420px) {
#changepercent, tr td:nth-child(4) {
    display: none;
    visibility: hidden;
}
#yhigh, tr td:nth-child(5) {
    display: none;
    visibility: hidden;
}
#ylow, tr td:nth-child(6) {
    display: none;
    visibility: hidden;
}
#turnover, tr td:nth-child(9) {
    display: none;
    visibility: hidden;
}
}

@media only screen and (max-width: 320px) {
#changepercent, tr td:nth-child(4) {
    display: none;
    visibility: hidden;
}
#yhigh, tr td:nth-child(5) {
    display: none;
    visibility: hidden;
}
#ylow, tr td:nth-child(6) {
    display: none;
    visibility: hidden;
}
#dhigh, tr td:nth-child(7) {
    display: none;
    visibility: hidden;
}
#dlow, tr td:nth-child(8) {
    display: none;
    visibility: hidden;
}
#turnover, tr td:nth-child(9) {
    display: none;
    visibility: hidden;
}
}