0

おそらく多くのコードで申し訳ありませんが、テーブルを固定サイズに設定した理由ですが、コンテンツが長すぎると td 幅に収まらず、テーブルサイズが 810px から何倍も長くなります....問題？なにが問題ですか？

<table cellpadding="0" cellspasing="0" class="sortable zebra tablesorter tablesorter-default" id="articles-table">
...

http://jsfiddle.net/FN5Sn/

ここに今のように見えます（そしてそうなるでしょう）：

ここに画像の説明を入力

いくつかの列のコンテンツを変更すると、次のようになります (したがって、テーブルは 810px ではなく、表示領域を超えて増加しています)

ここに画像の説明を入力

しかし、私は設定する必要があります。そのテーブルは固定サイズです。たとえば、テーブルが長すぎると3番目の列のサイズが小さくなります....これを行う方法は?

注: 2 列目は nowrap にする必要があります.... 他のすべては自動幅にすることができます

4

1 に答える 1

3

問題のある TD からこれを削除する必要があります。

white-space:nowrap;

マウスオーバー効果を使用して、TD に収まらない非表示のテキストを表示する方法は次のとおりです。

HTML:

<table width="100" border="1">
   <tr>
       <td>
           <div class="long">123 456 790-1122-4455</div>
       </td>
            <td>
           Other Data
       </td>
    </tr>
</table>

CSS:

td {
  white-space:nowrap; 
  min-height:25px;
  position:relative;
  width:90px  
}

.long {
    overflow-x:hidden;
    width:90px;
}   

.long:hover {
   position:absolute;
   z-index:10; 
   top:0;
   left:0;
   width:200px;
   background-color:#c0c0c0;
   border:1px solid #000000; 
   overflow-x:visible 
}
于 2013-03-11T21:35:49.940 に答える