Lösungen ,

tabelle-lisa-data-tables.php

Quell Code

<!DOCTYPE html>
<html>   
<head>

  <title>arabiya</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
    type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />

  <style>
    
    * {
    margin: 0;
    padding: 0;   
    font-family: Levenim MT;
}

body {
    background: url(Hintergrund.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
}

 

/*NAVIGATION*/
header{
  display:flex;
  flex-direction:row;
    z-index: 1;
    height: 100px;
    background-color: black;
}

#logo{
    width: 200px;
    height: 80px;
    margin: 6px;

}

nav{
    margin-top: 40px;
    margin-right: 0px;
    display:flex;
    min-width:500px;
  width:100%;
 
}

nav a {
    text-align: center;
    display: block; 
  width: 15%;
  height: 21px;
    padding: 5px;
    text-decoration: none;
    font-weight: bold;
    color: gold;
    font-size: 1em;
    border: solid gold;    
}

nav a:hover {
    color: black;
    background: gold;
    }

nav a:visited {
    color:yellow;
}
#menu a:active{
    color:red;
}
nav a:visited:hover {
    color: black;
}
main{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 180px);
  align-items: stretch;

}
.wrapper{
  display:flex;
  flex-direction:row;
  padding:60px 0 60px 0px;
}

.wrapper h1 {
    padding-top: 2px;
    text-align: center;
    margin: 2px;
    font-size: 3em;  
}

.wrapper h2 {
    padding-top: 3px;
    text-align: center;
    margin: 2px;
    font-size: 2em; 
 
}

.vokabeln-content{
    flex: 8;
}

hr{
  border:2px solid black;
  margin:15px;
}


.vokabeln-aside {
    flex:2;
    margin-top: 5px;
    margin-bottom: 80px;
}

.vokabeln-aside a {
    text-align: left;
    display: block; 
    width: 100%; 
    height: 21px;
    margin-top: 20px;
    margin-left: 0px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: 1.8em;
}


table { 

  width:100%;
    border: 1px black solid;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
    font-size: 1.3em;
    font-weight: bold;
}
th:nth-child(1){
width:10%;
min-width:75px;
}
th:nth-child(2){
width:10%;
min-width:70px;
}
th:nth-child(3){
width:10%;
  min-width:55px;
}
th:nth-child(4){
width:10%;
  min-width:55px;
}
th:nth-child(5){
width:10%;
  min-width:175px;
}
th:nth-child(6){
  width:50%;
  min-width:270px;
}
th,
td {
   border: 1px black solid;
   border-collapse: collapse;
   padding-left: 3px;  
}

footer {
    height: 80px;
  display:flex;
  padding-left:20px;
 
    background-color: black;
}

footer a {
    text-align: center;
    display: block; 
  width: 80px; 
  height: 18px;
    margin: 20px 12px 0 0;
    text-decoration: none;
    font-weight: bold;
    color: gold;
    font-size: 1.2em;
}


@media screen and (min-width: 701px){
  table{

   min-width:700px;
  }}

@media screen and (max-width: 700px) and (min-width: 100px) {
  table{
    width:80vw;
    font-size:2vw;
  }
  nav{
    width:100%;
    font-size:2.2vw;
  }
  nav a{
    width:auto;
    padding:1%;
  }
  th{
    width:10%;
  }
  th:nth-child(6){
    width:30%;
  }
  footer,header,body{
    width:100vw;
  }
}
  </style>
  
</head>
<body>
    <header> 
            <div id="logo">
                <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png"/>
            
            </div>
        <nav class="clearfix">
           
                <a href="index.html" data-wert="??????" class="mmtest" data-wertvorher="Home">Home</a>
                <a href="vokabeln.html" data-wert="????????" class="mmtest" data-wertvorher="Vokabeln">Vokabeln</a>
                <a href="quran.html" data-wert="??????" class="mmtest" data-wertvorher="Quran">Quran</a>
                <a href="#" data-wert="??????" class="mmtest" data-wertvorher="Konversation">Konversation</a>
                <a href="#" data-wert="??????" class="mmtest" data-wertvorher="Materialien">Materialien</a>
      
            
  </nav>
  </header>
<main>
 <div class="wrapper">    
 
<div class="vokabeln-content">
         
   <h1>Vokabeln</h1>
    <h2>Arabisches Alphabet</h2> 
            <table id="example"  class="display" cellspacing="0" width="100%">
 <thead>

                <tr>
                  <td class="sortierbar">Name</td>
                  <td class="sortierbar">Isoliert</td>
                  <td class="sortierbar">Ende</td>
                  <td class="sortierbar">Mitte</td>
                  <td class="sortierbar">Anfang</td>
                  <td class="sortierbar">Aussprache</td>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>Alif</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?*</td>
                      <td>?*</td>
                     <td>langes a</td>
                 </tr>
                <tr>
                    <td>Bä</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?</td>
                      <td>?</td>
                     <td>b</td>
                 </tr>
                <tr>
                    <td>Tä</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?</td>
                      <td>?</td>
                     <td>t</td>
                 </tr>
                <tr>
                    <td>Thä</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?</td>
                      <td>?</td>
                     <td>stimmlos wie engl. th in "think"</td>
                 </tr>
                <tr>
                    <td>Dschim</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?</td>
                      <td>?</td>
                     <td>stimmhaftes dsch</td>
                 </tr>
                <tr>
                    <td>Hä</td>
                     <td>?</td>
                     <td>?</td>
                     <td>?</td>
                      <td>?</td>
                     <td>scharfes, gehecheltes h</td>
                 </tr>
              </tbody>
              </table>
        </div>     
    
            <hr>
    <aside class="vokabeln-aside">
        
            
            <a href="#" id="Tiere">Tiere</a>
            <a href="#" id="Büro">Büro</a>
            <a href="#" id="Reisen">Reisen</a>
         
    </aside>




</div>

           </main>      
        
     
    
     <footer>
  
        <a href="kontakt.html" id="Kontakt">Kontakt</a>
        <a href="#" id="Impressum">Impressum</a>
    </footer>
</body> 
  <script>
    
    $('.mmtest').hover(function(){
  var vorher=$(this).html();
  var was=$(this).data('wert');
  $(this).html(was);
}).mouseout(function(){
  var vor=$(this).data('wertvorher');
  $(this).html(vor);
});
  </script>
       <script>
                $('#example').DataTable({
                paging: false,
                "scrollY": "80vh",
                "scrollCollapse": true,
            });

    </script>

</html>