CODEWITHSUNDEEP
asp.nethtmlcss
Elad Benda
Elad Benda

Reputation: 36654

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?

Upvotes: 1

Views: 437

Answers (2)

Rajesh Omanakuttan
Rajesh Omanakuttan

Reputation: 6918

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

Upvotes: 0

Mihai Iorga
Mihai Iorga

Reputation: 39704

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

Upvotes: 1

Related Questions