2017-03-26 13 views
1

このテーブルをモバイル用に応答させようとしていますが、正しく実行できました。私はブートストラップテーブル応答クラスを試しましたが、動作しません。 https://postimg.org/image/gxj2riueh/応答テーブルとrowspanとcolspan

モバイルフォーマット: https://postimg.org/image/mtq57pwcn/

コード:

<table> 
     <tbody> 
     <tr> 
      <td style="background: #fcfbcd;" rowspan="5" 
       <p style="text-align: center;">BREAKFAST</p> 
      </td> 
      <td> 
       <p><strong>MONDAY</strong></p> 
      </td> 
      <td> 
       <p><strong>TUESDAY</strong></p> 
      </td> 
      <td> 
       <p><strong>WEDNESDAY</strong></p> 
      </td> 
      <td> 
       <p><strong>THURSDAY</strong></p> 
      </td> 
      <td> 
       <p><strong>FRIDAY</strong></p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Milk</p> 
      </td> 
      <td> 
       <p>Milk</p> 
      </td> 
      <td> 
       <p>Milk</p> 
      </td> 
      <td> 
       <p>Milk</p> 
      </td> 
      <td> 
       <p>Milk</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Kix Cereal</p> 
      </td> 
      <td> 
       <p>Whole Grain Raisin</p> 
       <p>Bread (1 slice&nbsp; plain, Butter or Marg)</p> 
      </td> 
      <td> 
       <p>Cinnamon Raisin Bagel Cream Cheese</p> 
      </td> 
      <td> 
       <p>Bran Flakes Cereal</p> 
      </td> 
      <td> 
       <p>Cheerios Cereal</p> 
      </td> 
     </tr> 
     <tr> 
      <td style="background: #dbc0af;" rowspan="5" 
       <p style="text-align: center;">LUNCH</p> 
      </td> 
      <td> 
       <p>Juice</p> 
      </td> 
      <td> 
       <p>Juice</p> 
      </td> 
      <td> 
       <p>Juice</p> 
      </td> 
      <td> 
       <p>Juice</p> 
      </td> 
      <td> 
       <p>Juice</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Chicken Fingers</p> 
      </td> 
      <td> 
       <p>Corndog</p> 
      </td> 
      <td> 
       <p>Cold cut turkey sandwich</p> 
      </td> 
      <td> 
       <p>Hamburger/ Cheeseburger</p> 
      </td> 
      <td> 
       <p>Pizza</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Green Beans</p> 
      </td> 
      <td> 
       <p>Pickle</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Mashed Potatoes</p> 
      </td> 
      <td> 
       <p>&nbsp; Chips</p> 
      </td> 
      <td> 
       <p>Brownie</p> 
      </td> 
      <td> 
       <p>Fries</p> 
      </td> 
      <td> 
       <p>Breadsticks</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td style="background: #e7e5e6;" rowspan="5" 
       <p style="text-align: center;">SNACK</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>Milk /Juice</p> 
      </td> 
      <td> 
       <p>Milk /Juice</p> 
      </td> 
      <td> 
       <p>Soynut Butter</p> 
      </td> 
      <td> 
       <p>Cottage Cheese</p> 
      </td> 
      <td> 
       <p>Yogurt <strong><em>4 oz cup</em></strong></p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>Celery Sticks</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>pretzel</p> 
      </td> 
      <td> 
       <p>Oreo cookies</p> 
      </td> 
      <td> 
       <p>Raisins</p> 
      </td> 
      <td> 
       <p>Pears</p> 
      </td> 
      <td> 
       <p>Fruit Cocktail</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
      <td> 
       <p>&nbsp;</p> 
      </td> 
     </tr> 
     </tbody> 
     </table> 

答えて

1
    ROWSPANの私は問題に直面していますので、そのいずれかが、この表のために私に

    デスクトップフォーマットをCSSを提案することができます

  • 変更後

  • が不正な形式の固定本当のテーブル・ヘッダーに210「ヘッダが」<th>それらのそれぞれは、>

  • <section>に全体<table>ラップと.table-responsive

    を追加

    ブートストラップCSSをロードアングルブラケットを欠落していました
  • .table,table-compact~

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'> 
 

 
<section class='table-responsive' style='margin:15px auto;'> 
 
    <table class='table table-condensed'> 
 
    <tbody> 
 
     <tr> 
 
     <th style="background: #fcfbcd;" rowspan="5"> 
 
      <p style="text-align: center;">BREAKFAST</p> 
 
     </th> 
 
     <td> 
 
      <p><strong>MONDAY</strong></p> 
 
     </td> 
 
     <td> 
 
      <p><strong>TUESDAY</strong></p> 
 
     </td> 
 
     <td> 
 
      <p><strong>WEDNESDAY</strong></p> 
 
     </td> 
 
     <td> 
 
      <p><strong>THURSDAY</strong></p> 
 
     </td> 
 
     <td> 
 
      <p><strong>FRIDAY</strong></p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Milk</p> 
 
     </td> 
 
     <td> 
 
      <p>Milk</p> 
 
     </td> 
 
     <td> 
 
      <p>Milk</p> 
 
     </td> 
 
     <td> 
 
      <p>Milk</p> 
 
     </td> 
 
     <td> 
 
      <p>Milk</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Kix Cereal</p> 
 
     </td> 
 
     <td> 
 
      <p>Whole Grain Raisin</p> 
 
      <p>Bread (1 slice&nbsp; plain, Butter or Marg)</p> 
 
     </td> 
 
     <td> 
 
      <p>Cinnamon Raisin Bagel Cream Cheese</p> 
 
     </td> 
 
     <td> 
 
      <p>Bran Flakes Cereal</p> 
 
     </td> 
 
     <td> 
 
      <p>Cheerios Cereal</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th style="background: #dbc0af;" rowspan="5"> 
 
      <p style="text-align: center;">LUNCH</p> 
 
     </th> 
 
     <td> 
 
      <p>Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Juice</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Chicken Fingers</p> 
 
     </td> 
 
     <td> 
 
      <p>Corndog</p> 
 
     </td> 
 
     <td> 
 
      <p>Cold cut turkey sandwich</p> 
 
     </td> 
 
     <td> 
 
      <p>Hamburger/ Cheeseburger</p> 
 
     </td> 
 
     <td> 
 
      <p>Pizza</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Green Beans</p> 
 
     </td> 
 
     <td> 
 
      <p>Pickle</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Mashed Potatoes</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp; Chips</p> 
 
     </td> 
 
     <td> 
 
      <p>Brownie</p> 
 
     </td> 
 
     <td> 
 
      <p>Fries</p> 
 
     </td> 
 
     <td> 
 
      <p>Breadsticks</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <th style="background: #e7e5e6;" rowspan="5"> 
 
      <p style="text-align: center;">SNACK</p> 
 
     </th> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>Milk /Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Milk /Juice</p> 
 
     </td> 
 
     <td> 
 
      <p>Soynut Butter</p> 
 
     </td> 
 
     <td> 
 
      <p>Cottage Cheese</p> 
 
     </td> 
 
     <td> 
 
      <p>Yogurt <strong><em>4 oz cup</em></strong></p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>Celery Sticks</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>pretzel</p> 
 
     </td> 
 
     <td> 
 
      <p>Oreo cookies</p> 
 
     </td> 
 
     <td> 
 
      <p>Raisins</p> 
 
     </td> 
 
     <td> 
 
      <p>Pears</p> 
 
     </td> 
 
     <td> 
 
      <p>Fruit Cocktail</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     <td> 
 
      <p>&nbsp;</p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</section>

関連する問題