Question

I’m building a html table dynamically in an ASP.NET code behind file using C#. I basically loop through a set of data which is an unknown number of records and split a string containing all the values to make the required number of tds. I display the html by assigning it to an asp:Literal control. However I can’t get the table to fit the screen – the browser is adding a horizontal scroll bar and the full table is well off the screen. I tried in IE 8 and FF 3.6.13. Most things I’ve read online about it say to set the width to 100%. I’m doing this but it’s having no effect. Does assigning html to a Literal control like this render the same as it would any other way? The aspx page has a master page and the front end code for the aspx page is:

EDIT: I’ve pasted the outputted html code here:
http://www.codepaste.net/nza7r8

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" EnableViewState="False">
    <div><br />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal><br />
    </div>
    <div id="paging">
        <asp:Button ID="btnPrev" runat="server" Text="Prev" CssClass="niceInput" onclick="btnPrev_Click" Enabled="False" />
        <asp:Button ID="btnNext" runat="server" Text="Next" CssClass="niceInput" onclick="btnNext_Click" Enabled="False" />
        <asp:Label class="Grid" ID="lblPageNumber" runat="server"/>&nbsp;&nbsp;&nbsp;
        <asp:Label class="Grid" ID="lblTotalRecords" runat="server"/>
    </div><br />    
</asp:Content>

Here’s the code behind:

StringBuilder stringBuilder = new StringBuilder();
List<string> errorColumnsList;

stringBuilder.Append("<table align='center' width='100%' style='border-style:inset'>");

//1st element is header so do this separately
stringBuilder.Append("<tr style='font-size:smaller; font-weight:bold'>");
stringBuilder.Append("<td>ID</td><td>Error type</td>");
errorColumnsList = new List<string>(items[0].HoldingsError.Split("||".ToCharArray()));

foreach (string str in errorColumnsList)
{
    stringBuilder.Append("<td>" + str.Trim() + "</td>");
}

stringBuilder.Append("</tr>");

//Continue on with the rest of the data - remove header first
items.Remove(items[0]);

foreach (HoldingsErrorItem item in items)
{
    stringBuilder.Append("<tr style='font-size:smaller'>");
    stringBuilder.Append("<td>" + item.HoldingsErrorID + "</td><td>" + item.ErrorType + "</td>");
    errorColumnsList = new List<string>(item.HoldingsError.Split("||".ToCharArray()));

    foreach (string str in errorColumnsList)
    {
        stringBuilder.Append("<td>" + str.Trim() + "</td>");
    }

    stringBuilder.Append("</tr>");
}

stringBuilder.Append("</table>");

Literal1.Text = stringBuilder.ToString();

Answer 1

Setting the .Text property of an asp:Literal to be a string of HTML will indeed end up treating the HTML for the table no differently to if it was explicitly in the page.

How many columns are there in the resulting table? Usually, if the table would be wider than the window, each table cell in HTML will wrap its content on space characters to reduce the table width to fit, until it’s down to single words. Once it hits that point, it cannot wrap any further and it’s irrelevant what width you set – it will be forced to be as wide as the total widths of the longest words in each column.

Edit: The demonstration page shows what I expected: a large number of columns and, although each is “shrink wrapped” to the minimum width possible (by wrapping content on whitespace), the total width is still large.

I’m afraid this is just how HTML tables work. I tried adding style="max-width:3%;overflow:hidden;" to each td, but even that doesn’t stop the cells stretching to fit their longest unwrappable piece of content.