2016-11-12 4 views
1

In meiner HTML-Tabelle unten, warum bekomme ich nicht das responsive Aussehen, obwohl die Klasse eingestellt ist?Tabelle zeigt keine Antwort

Code:

<html class="no-js" lang="" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="x-ua-compatible" content="ie=edge" /> 
    <title> 
     Table Design 
    </title> 
    <meta name="description" content="" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous" type="text/css" /> 
    <style type="text/css"> 
    blockquote p{font-size: 12px;} 
    .removeTop{border-top: none !important;} 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
    <div class="row"> 
     <div class="center-block"> 
     <h1 class="page-header"> 
     Term 1 2017 
     </h1> 
     <table class="table table-responsive"> 
     <thead> 
      <tr> 
      <th>Location</th> 
      <th>Group</th> 
      <th>Day</th> 
      <th>Time</th> 
      <th>Cost</th> 
      <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>Point Chevalier</td> 
      <td>Cruisers</td> 
      <td>Tuesday</td> 
      <td>10:00</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
      <tr> 
      <td>Point Chevalier</td> 
      <td>Movers</td> 
      <td>Tuesday</td> 
      <td>11:15</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
     <tr class="block"> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      </tr> 
       <tr> 
      <td>Point Chevalier</td> 
      <td>Groovers</td> 
      <td>Wednesday</td> 
      <td>9:45</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
         <tr> 
      <td>Point Chevalier</td> 
      <td>Cruisers</td> 
      <td>Wednesday</td> 
      <td>11:00</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
         <tr> 
      <td>Point Chevalier</td> 
      <td>Movers</td> 
      <td>Wednesday</td> 
      <td>12:15</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
     <tr class="block"> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      <td class="removeTop"></td> 
      </tr> 
      <tr> 
      <td>St Heliers</td> 
      <td>Groovers</td> 
      <td>Friday</td> 
      <td>9:45</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
            <tr> 
      <td>St Heliers</td> 
      <td>Cruisers</td> 
      <td>Friday</td> 
      <td>11:00</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
            <tr> 
      <td>St Heliers</td> 
      <td>Movers</td> 
      <td>Friday</td> 
      <td>12:15</td> 
      <td>$149.50</td> 
      <td><img class="alignnone" src="http://website.co.nz/wp-content/uploads/2015/04/book-btn.png" alt="book-btn" width="121" height="30" /></td> 
      </tr> 
     </tbody> 

     </table>  
     <caption> 
      <strong>Monday - New Central Auckland location to be announced soon</strong> 
     </caption> 
     <div class="row"> 

     <div> 
     <blockquote> 
      <p>Book now, Pay Later *conditions apply</p> 
      <p>20% deposit required, this is non-refundable if you pull out before term time commences</p> 
      <p>*Remainder of payment due in January 2017</p> 
     </blockquote> 
     </div> 
     <div> 
     <blockquote> 
     <p><strong>Pt Chevalier</strong> - Tuesday 7th Feb - Tuesday 11th April (10 week term)</p> 
     <p><strong>Pt Chevalier</strong> - Wednesday 8th Feb - Wednesday 12th April (10 week term)</p> 
     <p><strong>St Heliers</strong> - Friday 3rd Feb - Friday 7th April (10 week term)</p> 
     </blockquote> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    </body> 
</html> 

Antwort

1

Sie haben die table-responsive Klasse den table-Tag.

Um Ihre Tabelle in Bootstrap reagieren. Wickeln Sie Ihren Tisch mit einem div.

<div class="table-responsive" > 
    <table class="table"> 
     ... 
    </table> 
</div> 

Ich denke, das wird Ihr Problem beheben.

Verwandte Themen