Javascript 具有rowspan和colspan的响应表
我正在努力使这张桌子对移动设备有响应，但可以做得很好。我尝试了引导表响应类，但它不起作用。由于行跨度，我面临的问题，所以任何人可以建议我这个表的css 桌面格式： 移动格式： 代码：Javascript 具有rowspan和colspan的响应表,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在努力使这张桌子对移动设备有响应，但可以做得很好。我尝试了引导表响应类，但它不起作用。由于行跨度，我面临的问题，所以任何人可以建议我这个表的css 桌面格式： 移动格式： 代码： <table> <tbody> <tr> <td style="background: #fcfbcd;" rowspan="5" <p style="text-align: center;
<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>
- 将
“标题”更改为实际表格标题
- 修复了格式错误的
它们中的每一个都缺少一个角括号
- 加载引导CSS
- 将整个
包装成
并添加.table-responsive
- 将
.table
和，table compact
添加到
早餐
周一
周二
周三
周四
周五
牛奶
牛奶
牛奶
牛奶
牛奶
吉克斯麦片
全粒葡萄干
面包（1片普通面包、黄油面包或边缘面包）
肉桂葡萄干百吉饼奶油奶酪
麦麸片麦片
麦片
午餐
果汁
果汁
果汁
果汁
果汁
鸡手指
玉米狗
冷切火鸡三明治
汉堡包/奶酪汉堡包
披萨
青豆
腌菜
土豆泥
筹码
布朗尼
炸薯条
面包棒
零食
牛奶/果汁
牛奶/果汁
黄豆黄油
白干酪
酸奶4盎司杯
芹菜条
椒盐卷饼
奥利奥饼干
葡萄干
梨
水果鸡尾酒