我希望将C＃ASP.NET MVC 3 Web应用程序转换为MVC 5.在此过程中，我希望通过使用bootstrap创建一个响应更快的表。使用引导网格系统使用标签会更好吗？或者使用表格会更好吗？有没有一种方法可以将网格系统中的列数增加到大于12的数字？
注意： 新的应用程序将使用bootstrap 3.2.0，jquery 1.11.1，mvc 5.2.0n razor 3.2.0。 应用程序必须在IE8上正常工作（因此停留在jquery 1.X分支上）。
以下是当前应用程序的示例表，我不确定如何格式化以在响应式界面中具有相似的外观。
<table class="Assignmenttable">
<tbody>
<tr class="td">
<th id="Assignment_Title" colspan="4" style="width:20%"> </th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style="width:30%"> First</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style=" width:30%"> Second</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="4" style="width:11%"> Complete</th>
</tr>
<tr class="td">
<th rowspan="3" colspan="1" style="font-size: medium">Assignment</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Woot</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 1</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 2</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 3</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 4</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 5</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 6</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="4" rowspan="2" style="font-size: medium; min-width:12%">Task 7</th>
</tr>
<tr class="td">
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
</tr>
<tr class="td">
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th> P1 </th>
<th colspan=""> P2</th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
</tr>
<!-- This row is for each assignment entry-->
<tr class="td" style="height: 60px; max-height: 100px">
<td id="td" class="td" style="width: 350px">
Project 2
</td>
<td id="LongDelay" align="center">
<input id="item_Shipped" name="item.task1" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task1" type="hidden" value="false">
</td>
<td id="ProjectDate">11-Apr-13</td>
<td id="ProjectDate">17-Aug-13</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
05-Apr-14
</td>
<td id="ProjectDate">
04-Aug-14
</td>
<td id="LongDelay" align="center">
<input id="item_taskComplete" name="item.task" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task" type="hidden" value="false">
</td>
<td id="ProjectDate">18-Apr-14</td>
<td id="ProjectDate">06-Aug-14</td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
21-Feb-14
</td>
<td id="ProjectDate">
15-Apr-14
</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="SlightDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">28-Mar-14</td>
<td title="" id="ProjectDate">11-Apr-14</td>
<td id="LongDelay" align="center">
<input id="item_task6" name="item.task6" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task6" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">15-Apr-14</td>
<td title="" id="ProjectDate">28-Aug-14</td>
<td colspan="3"></td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input id="item_taskAccepted" name="item.taskAccepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskAccepted" type="hidden" value="false">
</td>
<td id="LongDelay" align="center">
<input id="item_task2Accepted" name="item.task2Accepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task2Accepted" type="hidden" value="false">
</td>
<td id="ProjectDate">30-Apr-14 </td>
<td id="ProjectDate">07-Aug-14</td>
</tr>
<tr style="height: 4px">
<th id="blank" class="blank" colspan="29"></th>
</tr>
</tbody>
</table>
提前感谢任何建议！
答案 0 :(得分：0)
您可以查看Bootstrap Tables。
在选择使用Tables或Grid之间，它完全取决于您要显示的内容。如果没有适当的例子，很难真正建议哪一个更好用。
如果你想为你的代码使用Bootstrap表，那就像为.table元素添加<table>类一样简单。然后，为了正确缩放，您需要删除附加到<th>，<tr>和<td>元素的内联样式。甚至是colspans。