html table needs adjusting for different screens

Question

I've got a table that looks okay and fit the screen and adjusts to a certain point and any smaller.

It doesn't display completely and shows the right hand size of the table.

I really don't want to change the table settings with the style in the html code, as they look right but do need to add something there to make it change to be underneath Ie.the needs to have an extra then the to get it underneath each other.

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

h1 {
  font-size: 18.5px;
  font-weight: 200;
  align: center;
  font-style: italic;
  color: #fff;
  padding: .8rem .8rem .8rem .8rem;
  border: 0.2rem solid #fff;
  border-radius: 1rem;
  text-transform: uppercase;
  animation: flicker 1.5s infinite alternate;
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}


/* Animate neon flicker */

@keyframes flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: -0.2rem -0.2rem 1rem #fff, 0.2rem 0.2rem 1rem #fff, 0 0 .5rem var(--neon-text-color), 0 0 .2rem var(--neon-text-color), 0 0 .2rem var(--neon-text-color), 0 0 .3rem var(--neon-text-color), 0 0 .3rem var(--neon-text-color);
    box-shadow: 0 0 .4rem #fff, inset 0 0 .3rem #fff, 0 0 3rem var(--neon-border-color), inset 0 0 2rem var(--neon-border-color), 0 0 1rem var(--neon-border-color), inset 0 0 2rem var(--neon-border-color);
  }
  14%,
  24%,
  55% {
    text-shadow: none;
    box-shadow: none;
  }
  hr {
    width: 100%;
    height: 6px;
    background-color: black;
    opcaity: 0.5;
    margin-left: auto;
    margin-right: auto;
    z-index: 400;
    margin-top: 0px;
    box-shadow: 0 0 10px 1px black;
  }
  .navigationtablex tr:nth-child(odd) {
    background-color: beige;
    min-width: 200px;
  }
  .navigationtablex tr:nth-child(even) {
    background-color: beige;
    min-width: 200px;
  }
  .navigationtablex tr {
    min-width: 200px;
  }
  .navigationtablex th:first-child,
  .navigationtablex td:first-child {
    padding: 0px;
    min-width: 200px;
  }
  .navigationtablex td,
  .navigationtablex th {
    padding: 0px;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    min-width: 200px;
  }
  .navigationtablex th {
    font-weight: 400;
    min-width: 200px;
  }
  .navigationtablex {
    font-size: 18px!important;
    border: 3px solid #033;
    border-collapse: collapse;
    border-spacing: 3;
    min-width: 200px;
    display: table;
    float: right;
  }
  .dropbtn {
    padding: 0px;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    color: black;
    font-weight: 500;
    height: 100%;
    text-shadow: 0px 0px yellow;
    text-align: center;
    vertical-align: top;
    font-size: 16.5px;
    border: none;
    letter-spacing: .7px;
    font-family: verdana;
    float: left;
    min-width: 2 px;
    align: left;
  }
  .dropbtn:hover {
    border: none;
    height: 100%;
  }
  .dropdown {
    position: relative;
    display: inline-block;
    min-width: 250px;
    padding: 0px;
    height: 100%;
    border: none;
    cursor: pointer;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-image: linear-gradient(74.9deg, rgba(104, 13, 55, 1) 2.7%, rgba(122, 76, 244, 1) 68.6%, rgba(104, 13, 55, 1) 95%);
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
    border: .5px solid #353D30;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 6px 10px 6px;
    max-height: 400px;
    overflow: auto;
  }
  .dropdown-content a {
    color: black;
    padding: 10px 6px 10px 6px;
    text-decoration: none;
    z-index: 3;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    display: block;
    border: 2px solid #353D30;
    font-weight: 400;
    min-width: 250px;
    margin-right: 20px;
    margin-left: 2px;
  }
  .dropdown-content a:hover {
    background-color: #fff5ee;
    min-width: 2px;
    margin-right: 0px;
    display: block;
    border: 2px solid olive;
  }
  .dropdown:hover .dropdown-content {
    display: block;
    min-width: 2px;
    margin-right: 0px;
    color: black;
    font-weight: 400;
    border: none;
  }
  .dropdown:hover {
    background-color: beige;
    margin-right: 0px;
    border: none;
  }
  .columnb {
    float: left;
    width: 100%;
    padding: 15px 15px 15px 15px;
    min-height: 409px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  }
  .columnc1 {
    float: left;
    width: 100%;
    padding: 15px 15px 15px 15px;
    height: 80px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  }
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: left;
  }
  .sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  .sidenav a:hover {
    color: #f1f1f1;
  }
  .sidenav_a {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: left;
  }
  .sidenav_ a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 25px;
    color: blue;
    display: block;
    transition: 0.3s;
  }
  .sidenav_a a:hover {
    color: red;
  }
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 46px;
    margin-left: 50px;
  }
  .sidenav_a .closebtn_a {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 46px;
    margin-left: 50px;
  }
  .sidenav.closebtn_a {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 46px;
    margin-left: 50px;
  }
  @media screen and (max-height:450px) {
    .sidenav {
      padding-top: 15px;
    }
    .sidenav a {
      font-size: 17.5px;
    }
  }


  
  
  
  GHDistribution NPC
  
  
  
  



  
    
      
        
          
            
              
                Home page About us Wikipedia descriptionsNavigational helpProjects
                  Social pagesSite map Learning platform Email us 
              
            
          
        
        
      
    
  
  
    
      
        
        
          
            

              
                
                  Information about our current situation.
                
                
                  
                    
                      
                        
                          
                            ☰ 
                          
                        
                      
                    
                  
                  ×
                
                  
                    
                      
                        
                          Our current situationWikipedia descriptionsFundraisingVolunteeringStudy options
                            Assistances and trainingsCommunity based projectsEnriching programsPublic benefit organisationsUnemployed people
                            Business'es who supportPeople who support
                        
                      
                    
                  
                  
                
                
                  
                    
                      
                        
                          
                            ☰Open

html table needs adjusting for different screens

Answers (1)

Related Questions