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

Question

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:

Force the last column (LABELED : INFO) not to be displayed out of the TD
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 :(

@MichaelSazonov Yes,and when i do,this happens : [link](http://imageshack.us/photo/my-images/443/table2x.png/) Also tried to fix width,but i couldn´t make it work aswell — Marcello Grechi Lins, Nov 30 '11 at 13:02
Yes,with the Overflow:auto. Where should i put this height? Table ? Tr? Td ? Also,do i also have to fix the Width? is this "Width 100%" of the table probably messing things up? — Marcello Grechi Lins, Nov 30 '11 at 13:08
Put into your "info" td `style='width: "DESIRED_WIDTH"px; height "HEIGHT"px; overflow: auto;'` — Michael Sazonov, Nov 30 '11 at 13:12
@MichaelSazonov Just tried it,exactly how you wrote: style="width:70px;width:30px;overflow-auto;" Content of the Info column,still forcing the line to expand. Like this : [link](http://imageshack.us/photo/my-images/40/tableim.png/) I also removed layout:fixed from the Class of the table. Damn,i just dont know whats wrong =/ — Marcello Grechi Lins, Nov 30 '11 at 13:20
`style="width:70px;width:30px;overflow-auto;"` - this is incorrect; `style="width: 70px; height: 30px; overflow: auto;"` is what you're looking for. — Michael Sazonov, Nov 30 '11 at 13:23
@MichaelSazonov My Bad,it was correct in the HTML,but i wrote it incorrectly here. Rob, Why this is Invalid ? — Marcello Grechi Lins, Nov 30 '11 at 13:29
Run it through the validator. You cannot place the table or lists as you have them. — Rob, Nov 30 '11 at 13:31
@Rob just runt a HTML Validator for Chrome,and it says its Valid. Well,nevermind,i will try to figure it out myself. Thanks again guys :) — Marcello Grechi Lins, Nov 30 '11 at 13:37

score 2 · Answer 1 · answered Nov 30 '11 at 13:46

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>

Add 'white-space: nowrap;' to .FixedTable for this to work in Chrome btw. — dash, Nov 30 '11 at 13:52
You can also nest a DIV inside the TD but this is messier. See: http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width/7570613#7570613 — dash, Nov 30 '11 at 13:54
Thanks for the reply,but it was not exactly what i wanted. But again,thanks alot for the code provided and for making ot laugh at : "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" — Marcello Grechi Lins, Nov 30 '11 at 14:55
Thanks for the vote :-) I strongly suspect that Rob's earlier comment was due to the fact that he validated your source as it was (i.e. before it gets parsed by ASP.Net and output as HTML), which explains the comment about list etc. — dash, Nov 30 '11 at 14:59

score 1 · Accepted Answer · answered Nov 30 '11 at 13:49

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

Bullseye ! That was exactly what i wanted,really ! A div inside a table data,damn,looks like inception ! " A dream within a dream" — Marcello Grechi Lins, Nov 30 '11 at 14:56

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

2 Answers2