HTML / CSS / .NET переполняет только одну строку таблицы - PullRequest
Новая
       1

HTML / CSS / .NET переполняет только одну строку таблицы

1 голос
/ 30 ноября 2011

Я постараюсь быть кратким / подробным о том, что я пытаюсь сделать здесь.Я получил таблицу с данными, извлеченными из базы данных. Это страница .NET.В нем 6 столбцов, причем последний является проблемным.Все первые 5 столбцов практически не содержат информации (одна строка, чаще всего, только 3 слова).В последнем столбце будет отображаться весь XML-файл.

Я пытаюсь сделать следующее:

  1. Принудительно не отображать последний столбец (LABELED: INFO) изTD
  2. Переполнить содержимое этого столбца (INFO) по горизонтали.Лучше, если с той же высотой других строк.

Вот изображение текущего макета: http://imageshack.us/photo/my-images/85/tablenr.png/

Как видите, содержимое столбца INFO,отображается на разных высотах, в зависимости от необходимости расширения.

Я пытаюсь уменьшить его высоту и использовать горизонтальную прокрутку для чтения содержимого.

Вот фрагмент кода. 

 <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>

Вот класс .MainTable, который используется на столе: 

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

Извините, что сделал его длинным, я пытался быть кратким и точным,Заранее спасибо, я макет нуба: (

Ответы [ 2 ]

2 голосов
/ 30 ноября 2011

Это то поведение, которое вы ищете? 

<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>
1 голос
/ 30 ноября 2011

Может быть, проблема в "TD".

Вы можете поместить DIV со свойством ниже в вашем TD: 

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

код выглядит так: 

<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 будет прокручиваться вертикально и не будет больше, чем 30px

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...