響應式網站的引導網格或表格？

Question

我希望將C＃ASP.NET MVC 3 Web應用程序轉換為MVC5。在此過程中，我希望通過使用引導程序來創建響應更快的表。 將引導網格系統與標簽一起使用會更好，還是利用表格會更好？ 有沒有一種方法可以將網格系統中的列數增加到大於12的數量？

注意：新應用程序將使用引導程序3.2.0，jQuery 1.11.1，Mvc 5.2.0n剃須刀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>

在此先感謝您的任何建議！

Answer 1

您可以查看Bootstrap表 。

在選擇使用表格還是網格之間，這完全取決於您要顯示的內容。 沒有適當的示例，很難真正建議使用哪個更好。

如果您想使用Bootstrap的表作為代碼，就像為<table>元素放置.table類一樣簡單。 然后，為了使其正確縮放，您需要刪除附加到<th> ， <tr>和<td>元素的內聯樣式。 甚至是colspans 。