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:

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 🙁

Answer 1

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