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> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice 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> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td style="background: #e7e5e6;" rowspan="5"
<p style="text-align: center;">SNACK</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </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> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </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> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>