title: Bootstrap grid or table for a responsive website?
body: <p>I am looking to convert a C# ASP.NET MVC 3 web application to a MVC 5. During this process I wish to create a more responsive table through the use of bootstrap. Would it be better to use the bootstrap grid system with using  tags or would it be better to utilize a table? Is there a method to increase the number of columns in the grid system to a number greater than 12?</p>
  
  <p>Note:
  The new application will utilize bootstrap 3.2.0, jquery 1.11.1, mvc 5.2.0n razor 3.2.0.
  The application must work correctly on IE8 (staying on jquery 1.X branch for this reason).</p>
  
  <p>Below is an example table from the current application that I am unsure how to format to have a similar look in a responsive interface.</p>
  
  <pre><code>&lt;table class="Assignmenttable"&gt;
      &lt;tbody&gt;
          &lt;tr class="td"&gt;
              &lt;th id="Assignment_Title" colspan="4" style="width:20%"&gt; &lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
              &lt;/th&gt;
              &lt;th id="Assignment_Title" colspan="9" style="width:30%"&gt; First&lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
              &lt;/th&gt;
              &lt;th id="Assignment_Title" colspan="9" style=" width:30%"&gt; Second&lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
              &lt;/th&gt;
              &lt;th id="Assignment_Title" colspan="4" style="width:11%"&gt; Complete&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr class="td"&gt;
              &lt;th rowspan="3" colspan="1" style="font-size: medium"&gt;Assignment&lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Woot&lt;/th&gt;
  
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
  
              &lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 1&lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 2&lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 3&lt;/th&gt;
  
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
  
              &lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 4&lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 5&lt;/th&gt;
              &lt;th colspan="3" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 6&lt;/th&gt;
  
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;
  
              &lt;/th&gt;
              &lt;th colspan="4" rowspan="2" style="font-size: medium; min-width:12%"&gt;Task 7&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr class="td"&gt;
              &lt;th id="blank" class="blank" colspan="1"&gt;
              &lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1"&gt;
              &lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1"&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr class="td"&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
              &lt;th id="blank" class="blank" colspan="1" rowspan="1"&gt;&lt;/th&gt;
  
              &lt;th&gt; P1 &lt;/th&gt;
              &lt;th colspan=""&gt; P2&lt;/th&gt;
              &lt;th id="topBarDates"&gt;PL&lt;/th&gt;
              &lt;th id="topBarDates"&gt;LE&lt;/th&gt;
          &lt;/tr&gt;
  
  
          &lt;!-- This row is for each assignment entry--&gt;
          &lt;tr class="td" style="height: 60px; max-height: 100px"&gt;
  
              &lt;td id="td" class="td" style="width: 350px"&gt;
                  Project 2
              &lt;/td&gt;
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input id="item_Shipped" name="item.task1" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.task1" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;11-Apr-13&lt;/td&gt;
              &lt;td id="ProjectDate"&gt;17-Aug-13&lt;/td&gt;
  
              &lt;td id="blank" class="blank" colspan="1"&gt;&lt;/td&gt;
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.taskComplete" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;
                  05-Apr-14
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;
                  04-Aug-14
              &lt;/td&gt;
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input id="item_taskComplete" name="item.task" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.task" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td  id="ProjectDate"&gt;18-Apr-14&lt;/td&gt;
              &lt;td  id="ProjectDate"&gt;06-Aug-14&lt;/td&gt;
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.taskComplete" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;
                  21-Feb-14
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;
                  15-Apr-14
              &lt;/td&gt;
  
              &lt;td id="blank" class="blank" colspan="1"&gt;&lt;/td&gt;
  
  
              &lt;td id="SlightDelay" align="center"&gt;
                  &lt;input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.taskComplete" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td title="" id="ProjectDate"&gt;28-Mar-14&lt;/td&gt;
              &lt;td title="" id="ProjectDate"&gt;11-Apr-14&lt;/td&gt;
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input id="item_task6" name="item.task6" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.task6" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td title="" id="ProjectDate"&gt;15-Apr-14&lt;/td&gt;
              &lt;td title="" id="ProjectDate"&gt;28-Aug-14&lt;/td&gt;
  
              &lt;td colspan="3"&gt;&lt;/td&gt;
              &lt;td id="blank" class="blank" colspan="1"&gt;&lt;/td&gt;
  
  
  
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input id="item_taskAccepted" name="item.taskAccepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.taskAccepted" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td id="LongDelay" align="center"&gt;
                  &lt;input id="item_task2Accepted" name="item.task2Accepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"&gt;&lt;input name="item.task2Accepted" type="hidden" value="false"&gt;
              &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;30-Apr-14  &lt;/td&gt;
              &lt;td id="ProjectDate"&gt;07-Aug-14&lt;/td&gt;
  
  
          &lt;/tr&gt;
          &lt;tr style="height: 4px"&gt;
              &lt;th id="blank" class="blank" colspan="29"&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thanks in advance for any advice!</p>