Question

I have built the following table:

    <table id="viewConfigurationTable" style="width:700px">
    <tr>
        <td style="width:100px">Id</td>
        <td style="width:100px">Name</td>
        <td style="width:200px">Status</td>
        <td style="width:300px">Ctids</td>
        <td style="width:300px">CreationDate</td>
    </tr>

    <% foreach (var config in Model.AliveConfigurations)
       {
    %>
    <tr>
        <td><%=config.Id%></td>
        <td><%=config.Name%></td>
        <td><%=config.Status%></td>
        <td><%=config.Ctids%></td>
        <td><%=config.CreationDate%></td>

    </tr>
    <%
        }
    %>
</table>

and yet the Ctids column get really wide sometimes.

How can I fix this?

Answer 1

From my point of view, tables width are “not usable”, you could try to make them div‘s.

But if you really need tables to be fixed, change the widths of TD‘s to match table width, add table-layout:fixed to table as style and set TD‘s to break words: word-wrap:break-word.

jsFiddle Example