HTML/CSS/.NET Overflow only one line of table

I will try to be brief/detailed about what i am trying to do here. I got a table with data fetched from a database.This is a .NET Page. It have 6 columns,with the last one beeing the problematical one. All first 5 columns have little to no info(one line,most of the times, 3 words only). The last column though,will display a whole XML file.

What i am trying to do is:

  1. Force the last column (LABELED : INFO) not to be displayed out of the TD
  2. Overflow the content of this column(INFO),horizontally. Better if with the same height of the other lines.

Here is a picture of the current layout: http://imageshack.us/photo/my-images/85/tablenr.png/

As you can see,the content of the INFO column,is beeing displayed in different heights,according to its need to expand.

What i am trying to,is to force its height to be smaller,and use the horizontal scroll to read the content.

Here is the code snippet.

 <div id="dvLogView" runat="server" visible="true">   
     <asp:ListView ID="lvLogs" runat="server" 
        style="margin-left: 9px; margin-top: 27px">
            <LayoutTemplate>
                <ul>
                <table border="1" style="width:100%;" class="mainTable">
                    <tr>
                        <th> ID </th>
                        <th> GENERATOR_ </th>
                        <th> DATETIME </th>
                        <th> DBLOGIN </th>
                        <th> INFOTYPE </th>
                        <th> INFO </th>
                    </tr>
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                </table>
                </ul>
            </LayoutTemplate>

            <ItemTemplate>
                <li>
                    <tr style="max-height:20px;">
                          <td align="center" style="max-height:20px;"> <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_ID") %>'></asp:Label> </td>
                          <td align="center" style="max-height:20px;"> <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_GENERATOR") %>'></asp:Label> </td>
                          <td align="center" style="max-height:20px;"> <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_DATETIMESTRING") %>'></asp:Label> </td>
                          <td align="center" style="max-height:20px;"> <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_DBLOGIN") %>'></asp:Label> </td>
                          <td align="center" style="max-height:20px;"> <asp:Label ID="Label5" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_INFOTYPE") %>'></asp:Label> </td>

                          <!-- XML Content -->
                          <td style="max-height:20px; word-wrap:normal; overflow:auto;"><asp:Label ID="Label6" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_INFO") %>'></asp:Label> </td>
                     </tr>  
                </li>
            </ItemTemplate>
    </asp:ListView>
</div>

Here is the .MainTable Class being used on the table:

.mainTable 
{
table-layout:fixed;
width:400px;
}

Sorry for making it long,i tried to be brief and precise. Thanks in advance,im a layout noob :(

Answers


Maybe the "TD" is the problem.

You can put a DIV with property below inside your TD:

style="height: 30px; overflow-x: auto; overflow-y: scroll;"

the code looks like this:

<td style="max-height:20px; word-wrap:normal; overflow:auto;">
    <div style="height: 20px; overflow-x: auto; overflow-y: scroll;">
        <asp:Label ID="Label6" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "m_INFO") %>'></asp:Label>
    </div>
</td>

Div will scroll vertically and will not be bigger than 30px


Is this the behaviour you are looking for?

<html>
    <head>
        <style type="text/css">

            .FixedTable{
                table-layout:   fixed; 
                width:          100%;
                border:         1px solid #000000;
            }

            td{
                text-align:     center;
            }

            .LongField{
                height:         20px;
                width:          300px;
                overflow:       hidden;
                text-align:     left;
            }

        </style>
    </head>
    <body>

        <table  class="FixedTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Date</th>
                    <th>Name</th>
                    <th>User</th>
                    <th class="LongField">Some really long data</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>30 November 2011</td>
                    <td>Some other data</td>
                    <td>Mr Name</td>
                    <td class="LongField">Really long fieldname that is aggravatingly pushing out the size of my last column and ruining my life, contributing to disorder, sadness, and increasing entropy in the world</td>
                </tr>
            </tbody>

        </table>

    </body>


</html>

Need Your Help

How do you pass an environment variable to Solr running inside Docker when the environment variable only exists inside the container?

postgresql solr docker

I need to do a dataimport from a PostgreSQL container running inside docker to a Solr server also running inside of Docker.

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.