HTML/CSS/.NETオーバーフローテーブルの1行だけ

私はここで何をしようとしているかについて簡単に説明しようとします。データベースからデータを取得したテーブルがあります。これは.NETページです。それは6つの列を持ち、最後の列は問題の列を持つ。すべての最初の5列には情報がほとんどない（1行、ほとんどの場合、3語のみ）。最後の列はXMLファイル全体を表示します。HTML/CSS/.NETオーバーフローテーブルの1行だけ

私は何をしようとしていることである：

が最後の列強制： TD
オーバーフローこのコラムの内容（INFO）の外に表示されていない（ラベルINFO）を、水平に。ほかの行と同じ高さの場合は、が良いでしょう。あなたが見ることができるように http://imageshack.us/photo/my-images/85/tablenr.png/

、INFO列の内容は、拡大するその必要性に応じて、異なる高さで表示されbeeingて：ここで

は、現在のレイアウトの写真です。

私がしようとしていることは、その高さを小さくすることです。コンテンツを読むには水平スクロールを使います。

ここにコードスニペットがあります。ここで

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

申し訳ありませんが、私は簡潔かつ正確であることを試みました。事前のおかげで、レイアウトのnoobイム:(

出典

2011-11-30 Marcello Grechi Lins

単純な 'height：＃px'を使用しようとしましたか？ –

@MichaelSazonovはい、私がそうするとき、これは起こります：[リンク]（http://imageshack.us/photo/my-images/443/table2x.png/）また、幅を修正しようとしましたが、私はcouldn''tそれもうまく動作するようにする –

'overflow：auto'？私には少し奇妙に見えます。 –

を探している行動は多分「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を超えません

出典

2011-11-30 13:49:49 fabriciorissetto

ブルズアイ！これはまさに私が欲しいものでした、本当に！テーブル内のdivデータは、始まりのようです。「夢の中の夢」 –

あなたは？

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

出典

2011-11-30 13:46:40 dash

'white-space：\t nowrap; .FixedTableをChromeで動作させるにはbtw。 – dash

TDの中にDIVをネストすることもできますが、これは面倒です。返信用 http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width/7570613#7570613 – dash

おかげで、そうではありませんでした：参照してください。まさに私が望むもの。もう一度、提供されたコードのおかげで多くの笑いを作る： "私の最後の列のサイズを悪化させ、人生を台無しにして、乱れ、悲しみ、および増加するエントロピーに世界」投票 –

HTML/CSS/.NETオーバーフローテーブルの1行だけ

答えて

関連する問題