limiting column width in html

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?

Answers


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


Try this:

   <style type="text/css">
    table {
      width: 25%;//use this value for the table size compared to the screen size.
    }
    table td {
      width:auto;
      border: 1px solid red;
    }
  </style>

    <table id="viewConfigurationTable">
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Status</td>
            <td>Ctids</td>
            <td>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>

Look here


Need Your Help

AMQP 1.0 support in ActiveMQ - can't set prefetch

activemq amqp prefetch qpid

We're trying to build a job queue system on top of ActiveMQ 5.9.1. We're using the AMQP 1.0 support in activemq, currently using the qpid jms library for the client code.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.