We Keep Coding

How to get html table data to a data table

I am using a table with asp repeater. I want to retrieve table data to a data table in C#. How can I do this?
Design:
<asp:Repeater runat="server" ID="rptItems">
<HeaderTemplate>
<table id="tblDetItems" border="1" style="font-size: 9pt; border-color: #A9A9A9;
position: relative; overflow-y: auto;" class="display" cellspacing="0">
<thead style="background: #808080; color: White; font-weight: bold; border-color: White;">
<tr>
<th style="width: 10px;">
SlNo.
</th>
<th style="width: 200px;">
Item Code
</th>
<th style="width: 300px;">
Description
</th>
<th style="width: 80px;">
Group
</th>
<th style="width: 100px;">
Standard Rate
</th>
<th style="width: 100px;">
Labour Charge
</th>
<th style="width: 100px;">
Recovery Cost
</th>
<th style="width: 80px;">
Active ID
</th>
</tr>
<tr style="background-color: Silver;">
<th style="width: 10px;">
<input type="text" runat="server" style="width: 60px;" id="txtslno" />
</th>
<th style="width: 200px;">
<input type="text" runat="server" style="width: 200px;" id="txtCode" />
</th>
<th style="width: 300px;">
<input type="text" runat="server" style="width: 300px;" id="txtDesc" />
</th>
<th style="width: 80px;">
<input type="text" runat="server" style="width: 80px;" id="txtGroup" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txtStdRate" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txtLbrCharge" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txtRcvryCost" />
</th>
<th style="width: 80px;">
<select id="cmbUseId" runat="server" style="width: 80px;">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width: 10px; text-align: right; height: 13px;">
<%# Eval("sl_no")%>
</td>
<td style="width: 200px; height: 13px;">
<input type="text" runat="server" style="width: 190px; text-align: left; height: 13px;" id="txtCode" value='<%# Eval("item_cd")%>' onkeyup="return onkeyup_txtphystkv(this,event);" />
</td>
<td style="width: 300px; height: 13px;">
<%# Eval("item_desc")%>
</td>
<td style="width: 80px; height: 13px;">
<%# Eval("gp_cd")%>
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 100px; text-align: right; height: 13px;" id="txtStdRate" value='<%# Eval("std_rt")%>' onkeyup="return onkeyup_txtphystkv(this,event);" />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 100px; text-align: right; height: 13px;" id="txtLbrCharge" value='<%# Eval("labour_charge")%>' onkeyup="return onkeyup_txtphystkv(this,event);" />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 100px; text-align: right; height: 13px;" id="txtRcvryCost" value='<%# Eval("recovery_cost")%>' onkeyup="return onkeyup_txtphystkv(this,event);" />
</td>
<td style="width: 80px; text-align: right; height: 18px;">
<select id="cmbUseId" runat="server" style="width: 80px; height: 18px;">
<option value="Y" selected="selected">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>

First thing, need to take the data entered in the controls of repeater to the server. For that the controls (TextBoxes, Dropdown lists etc.) should be accessible in code behind.
You need to Replace
<input type="text">
<select id="cmbUseId" runat="server">
with
<asp:TextBox id="<<appropriateId>>" runat="server" />
<asp:DropDownList id="<<dropdownListId1>>" runat="server">
<asp:ListItem Text="Yes" Value="Y" />
<asp:ListItem Text="No" Value="N" />
</asp:DropDownList>
On a click of button you need to create a DataTable and add appropriate columns to it.
var dataTable = new DataTable();
var column = new DataColumn();
column.ColumnName = <<columnname1>>;
column.DataType = <<columntype1>>;
dataTable.Columns.Add(column);
column = new DataColumn();
column.ColumnName = <<columnname2>>;
column.DataType = <<columntype2>>;
dataTable.Columns.Add(column);
//And So On.. to add necessary columns to the datatable.
Then loop thru all the items of the repeater, access the controls from each item and populate them in the dataRow and add the datarow in the table created above.
foreach (RepeaterItem item in rptItems.Items)
{
var dataRow = dataTable.NewRow();
if (item.ItemType == ListItemType.Item)
{
var textBox1 = (TextBox)item.FindControl("<<textboxId1>>");
dataRow["<<columnname1>>"] = textBox1.Text;
var textBox2 = (TextBox)item.FindControl("<<textboxId2>>");
dataRow["<<columnname2>>"] = textBox2.Text;
//And So On... to retrive values from all the textboxes inside the item and set values of appropriate columns in dataRow;
var dropdownList = (DropDownList)item.FindControl("<<dropdownListId1>>")
dataRow["<<somecolumn>>"] = dropdownList.SelectedValue;
//Once values from all the controls of item are obtained and set in the dataRow;
datatable.Rows.Add(dataRow);
}
}

.NET ListView footer controls

New to using the ListView control and I'm trying to retrieve the value of some textboxes in the layout template. Here's my aspx code:
<asp:ListView
ID="lvFundingSummary"
OnItemCommand="lvFundingSummary_onItemCommand"
OnItemDataBound="lvFundingSummary_ItemDataBound"
runat="server" >
<EmptyDataTemplate>
<table
id="Table1"
runat="server"
style="background-color: #FFFFFF;
border-collapse: collapse;
border-color: #999999;
border-style:none;
border-width:1px;">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr>
<td style="width: 50%; text-align:left; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblResearchArea" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "PlName")%>' />
</td>
<td style="width: 30%; text-align:right; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblFundingGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FundingGross", "{0:c}")%>' />
</td>
<td style="width: 20%; text-align:right; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AllGross", "{0:c}")%>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" style="width: 90%" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server" width="100%">
<table
ID="itemPlaceholderContainer"
runat="server"
style="width: 98%">
<tr id="TrHeading" runat="server">
<th id="Th1" style="width: 50%; text-align:left;" runat="server">
Research Area</th>
<th id="Th2" style="width: 30%; text-align:right;" runat="server">
Gross</th>
<th id="Th3" style="width: 20%; text-align:right;" runat="server">
All Gross</th>
</tr>
</table>
<div style="overflow-y:scroll; height:400px;">
<table style="border: 10px; width: 100%">
<tr ID="itemPlaceholder" runat="server"></tr>
</table>
</div>
</td>
</tr>
<tr id="Tr2" runat="server">
<td id="Td2" runat="server"
style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
</td>
</tr>
<tr id="TrFooter" runat="server">
<td style="width: 50%; text-align:left;">
<b>Total(s)</b>
</td>
<td id="TdTotal" style="width: 30%; text-align:right;">
<b>
<asp:Label ID="lblTotalFunding" runat="server" /></b>
</td>
<td id="TdTotal" style="width: 20%; text-align:left;">
<b>
<asp:Label ID="lblTotalGross" runat="server" /></b>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
in the lvFundingSummary_PreRender event, I'm trying to access the control as such:
Label lbTotFund = this.lvFundingSummary.FindControl("TrFooter").FindControl("lblTotalFunding") as Label
but that's not working. I know this should be a snap, just can't quite seem to find it.

According to this post, use
var lbTotFund = lvFundingSummary.FindControl("lblTotalFunding") as Label;
in lvFundingSummary_LayoutCreated event, it should do the work

How to save necessary information of HTML file to string variable

A HTML file is generated by Android MobileBiz Pro invoice app. I'm trying to make software for print HTML based invoice via receipt printer
I need to save necessary information of HTML file to string variable as mentioned below. I tried using IndexOf method. but it's not working for me. How can I get this information using visual c#?
string subtotal = 2,976.00;
string total = 2,976.00;
string payment= 2,760.00;
string balance= 216.00;
This is an example of the HTML code:
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
This is a complete HTML code of HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 8pt;
padding: 0 50pt 0 50pt;
}
table td, table th, table.sales th, table td.footer-text {
font-size: 8pt;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
color:chocolate;
text-transform:uppercase;
font-size: inherit;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:0px;
margin-bottom:0px;
color:chocolate;
text-transform:uppercase;
font-size: 1.3em;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
}
table.sales td {
padding: 4px 10px 4px 10px;
}
table.sales th {
padding: 5px 10px 5px 10px;
background-color:#CCC;
}
tr.saleline td {
border-bottom-color:chocolate;
border-bottom-width: 1pt;
border-bottom-style: solid;
vertical-align: top;
}
.signature {
display: none;
}
.horizontal-line {
border: 0;
height: 4pt;
color:chocolate;
background-color: chocolate;
}
.total {
font-weight:bold;
font-size:1.1em;
background-color:#CCC;
}
.block1 {
text-align:left;
vertical-align:bottom
}
.block2 {
text-align:right;
vertical-align:bottom
}
.block3 {
text-align:left;
vertical-align:top;
}
.block4 {
text-align:left;
vertical-align:top;
}
.block5 {
text-align:right;
vertical-align:bottom;
}
.block6 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block7 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block8 {
text-align:left;
vertical-align:bottom;
}
.block9 {
text-align:center;
vertical-align:bottom;
}
.block10 {
text-align:right;
vertical-align:bottom;
}
.block11 {
text-align:left;
padding: 25px 0 15px 0;
}
.extracols {
border-style:solid;
border-color:gray;
}
table.extracols {
border-top-width: 1pt;
border-right-width: 0;
border-bottom-width: 1pt;
border-left-width: 1pt;
border-collapse:collapse;
margin: 0 0 15pt 0;
}
table.extracols th {
padding: 5px 10px 5px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#CCC;
}
table.extracols td {
padding: 4px 10px 4px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#FFF;
}
#footer {
margin-top: 35px;
}
.footer-text {
font-size: inherit;
font-size: 0.97em
}
</style>
</head>
<body style="padding: 20 20 20 20">
<table width="100%">
<tr>
<td style="padding-bottom:20px"><table width="100%">
<tr>
<td style="text-align:left;"></td>
<td class="block2" align="right"><h3>Y.P.Brothers</h3>
No:55/B,<br/>Samagipura,<br/>Sewanagala.
<br/>077-6977139
<br/>mecduino#gmail.com
<br/>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="horizontal-line"/></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td style="padding:10px 0 20px 0;"><table width="100%">
<tr>
<td width="33%" class="block3"><strong>Bill To</strong><br />
ANUSHA SURIYA<br/>
</td>
<td class="block4"><strong></strong><br />
</td>
<td class="block5" align="right"><h1>invoice #1</h1>
<b>Date</b>: Oct 9, 2015
<br/><b>Due Date</b>: Oct 9, 2015
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><table width="100%" class="sales">
<!-- Headers -->
<tr>
<th align="center">Qty</th> <th align="center">Item</th> <th align="right">Price</th> <th align="right">Amount</th>
</tr>
<!-- Rows -->
<tr class="saleline"> <td align="left">12</td> <td align="left">helaligth 35/=</td> <td align="right">35.00</td> <td align="right">420.00</td> </tr>
<tr class="saleline"> <td align="left">12</td> <td align="left">200p CR SR 195/=</td> <td align="right">195.00</td> <td align="right">2,340.00</td> </tr>
<tr class="saleline"> <td align="left">36</td> <td align="left">Sunlight 35g</td> <td align="right">6.00</td> <td align="right">216.00</td> </tr>
<!-- Totals -->
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" style="margin-top:30px">
<tr>
<td width="50%" class="block6"><h2></h2>
</td>
<td width="50%" class="block7" align="right"><h2></h2>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table class="block11" width="100%">
<tr>
<td><table></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="signature">
<table border="0" cellspacing="2" cellpadding="2" align="left">
<tr>
<td style="padding-bottom:30px"></td>
</tr>
<tr>
<td><b>Signed by:</b>
<br/><b>Date:</b>
<br/><b>Signature:</b><br/></td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%" border="0" cellpadding="2">
<tr>
<td align="center"><span class="footer-text">Thank you for your business.</span></td>
</tr>
</table>
</div>
</body>
</html>

You need an html parser, try this one http://htmlagilitypack.codeplex.com/
Load page into HtmlDocument
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument htmlDocument = htmlWeb.Load("url");
Get table with specified Id
HtmlNode table = htmlDocument.DocumentNode.Descendants("table").SingleOrDefault(x => x.Id == "tableId");
Loop through nodes to find values
foreach(HtmlNode child in table.ChildNodes)
{
if (child.NodeType != HtmlNodeType.Text)
{
Console.WriteLine(child.Name);
}
}
More you can check here http://www.codeproject.com/Articles/691119/Html-Agility-Pack-Massive-information-extraction-f

You have to use parseHTML function of jquery and then loop through each element to get the values. Below is the working example (It can be more refined as per your need)
$(document).ready(function () {
var str = '<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>';
var html = $.parseHTML(str);
$.each(html, function (index, element) {
if ($(this).find("td:first").html() == "Subtotal")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first b").html() == "TOTAL")
console.log($(this).find("td:last b").html());
else if ($(this).find("td:first").html() == "Less Payment")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first strong").html() == "Balance Due")
console.log($(this).find("td:last").html());
});
});

CSS not displaying the same across different broswers

This is what my page should look like, this is displayed in IE:
This is what it looks like in Firefox:
This is my code:
#using CustPortal.serviceclass
#model CustomerData
<br/>
<div class="leftdiv">
<fieldset>
<legend>Customer Info</legend>
#Html.Partial("CustomerInfo", Model)
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>Balance</legend>
<div>
#Html.Partial("AccountBalance", Model)
</div>
</fieldset>
</div>
<div>
<table style="width: 100%" id="ThinLineTable">
<tr>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Date</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Refer#</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 30%">Description</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 10%">Qty</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Total</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Balance</th>
</tr>
#foreach (var item in (IEnumerable<TransactionHistory>) ViewBag.TransactionHistory)
{
<tr>
<td class="ThinLineTdLeft">#item.TransactionDate</td>
<td class="ThinLineTdLeft">#item.ReferenceNumber</td>
<td class="ThinLineTdLeft">#item.Description</td>
<td class="ThinLineTdRight">#item.Quantity</td>
<td class="ThinLineTdRight">#item.Total</td>
<td class="ThinLineTdRight">#item.Balance</td>
</tr>
}
</table>
</div>
And my css:
.ThinLineTdRight {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: right;
}
.ThinLineTdLeft {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: left;
}
.ThinLineTh {
background-color: #e8eef4;
}
.rightdiv {
float: right;
width: 49%;
text-align: left;
}
.leftdiv {
float: left;
width: 49%;
text-align: left;
}
I'm not great with CSS, I'm still learning. Can anyone tell me what I am doing wrong to make it display differently in FF than in IE?
Thank you!

Bootstrap grid or table for a responsive website?

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?
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).
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.
<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>
Thanks in advance for any advice!

You can look into Bootstrap Tables.
Between choosing to use Tables or Grid, it entirely depends on what you're trying to show. Without proper examples, it's hard to really suggest which one is better to use.
If you want use Bootstrap's table for your code, it's as easy as just putting a .table class for your <table> element. Then, for it to properly scale you need to remove the inline styles attached to your <th>, <tr>, and <td> elements. Even the colspans.