<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Standardbefehl für responsive Seiten -->
<style>
table {
  border-collapse: collapse;  /* macht alle Tabellen responsiv */
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

 td {
  text-align: left;
  padding: 8px;
}
 th {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}  /* erzeugt unterschiedliche Hintergrundfarbe je Zeile*/
</style>
</head>
<body>

<h2>Responsive Tabelle</h2>
<p>Für Mobiltelefone, Tablets und PC geeignet. Ist der Bildschirm zu schmal, wird 
dem User ein Scrollbalken angeboten. Das ist für mehrspaltige Tabellen oft die 
einzige Möglichkeit dem Benutzer die gesamte Tabelle 
zur Verfügung zu stellen.</p>
<p>Der Effekt ist auch am PC zu sehen, wenn das Browserfenster verkleinert wird.</p>

<div style="overflow-x:auto;"> <!-- wichtiger Befehl! erzeugt horiz.scrollbar bei kleinem Bildchirm -->
  <table>
    <tr>
      <th>Firmenname</th>
      <th>ISIN</th>
      <th>Kurs<br />2019 <br />01 01</th>
      <th>Kurs<br />2019 <br />01 02</th>
      <th>Kurs<br />2019 <br />01 03</th>
      <th>Kurs<br />2019 <br />01 04</th>
      <th>Kurs<br />2019 <br />01 06</th>
      <th>Kurs<br />2019 <br />01 07</th>
      <th>Kurs<br />2019 <br />01 08</th>
      <th>Kurs<br />2019 <br />01 09</th>
      <th>Kurs<br />2019 <br />01 10</th>
      <th>Kurs<br />2019 <br />01 13</th>
    </tr>
    <tr>
      <td>AAAAAComp</td>
      <td>123456</td>
      <td>50,56</td>
      <td>50,55</td>
      <td>51,67</td>
      <td>58,88</td>
      <td>53,65</td>
      <td>51,86</td>
      <td>49,67</td>
      <td>48,66</td>
      <td>52,66</td>
      <td>51,76</td>
    </tr>
    <tr>
      <td>BBBComp</td>
      <td>2345678</td>
      <td>150,56</td>
      <td>150,33</td>
      <td>151,67</td>
      <td>158,88</td>
      <td>153,44</td>
      <td>150,86</td>
      <td>149,67</td>
      <td>148,66</td>
      <td>152,54</td>
      <td>151,76</td>
    </tr>
    <tr>
      <td>CCCcomp</td>
      <td>567890123</td>
      <td>350,56</td>
      <td>350,33</td>
      <td>351,67</td>
      <td>358,88</td>
      <td>353,44</td>
      <td>360,86</td>
      <td>369,67</td>
      <td>358,66</td>
      <td>352,54</td>
      <td>358,76</td>
    </tr>
  </table>
</div>

</body>
</html>