HTML-Prototype der OTH-Regensburg

<div class="table-container">
  <ul class="table-mobile o-list-bare u-hide@desktop">
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value">Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
      </ul>
    </li>
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value"></p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
      </ul>
    </li>
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value"></p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value">Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
      </ul>
    </li>
  </ul>
  <div class="table-rwd">
    <div class="table-rwd__overflow">
      <table class="u-hide--mobile-only">
        <thead>
          <tr>
            <th>
              <p>Arbeiterunfallversicherungsgesetz</p>
            </th>
            <th>
              <p>Aenean commodo</p>
            </th>
            <th>
              <p>Bundesausbildungsförderungsgesetz</p>
            </th>
            <th>
              <p>Behindertengleichstellungsgesetz</p>
            </th>
            <th>
              <p>Kraftfahrzeug-Haftpflichtversicherung</p>
            </th>
            <th>
              <p>Steuervergünstigungsabbaugesetz</p>
            </th>
            <th>
              <p>Nahrungsmittelunverträglichkeit</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p></p>
            </td>
            <td>
              <p>dolor sit amet</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p></p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>