web-dev-qa-db-ja.com

データテーブルと不要な水平スクロールバーの問題

これがかなり単純な問題であることを願っています。

Datatablesを使用して、水平スクロールなしでテーブルを作成しようとしています。テーブルにはいくつかの長いデータ行があり、これを1行に保ち、オーバーフローを非表示にする必要があります。

ここではデータテーブルに関してかなり基本的なものが欠けているようですが、テーブルが垂直スクロールバーを取得するときに水平スクロールバーを取り除くことができないようです。

http://jsfiddle.net/FBpLA/3/

2つのテーブル（同一のデータ）があり、どちらも非常に簡単に初期化されます。

$('#mytable').dataTable({
    bFilter: false,
    bInfo: false,
    bPaginate: false,
});

$('#mytable2').dataTable({
    bFilter: false,
    bInfo: false,
    bPaginate: false,
    sScrollY: '150px'
});

ページのスタイルはかなり単純です

body {
     height:100%;
     color: #000000;
     font-family: Helvetica, Arial, Verdana, sans-serif;
     font-size: 10pt;
     background-color: #B4D4EC;
 }
 .main-panel {
     display:block;
     background:white;
     padding:20px;
     height: 100%;
     position:absolute;
     width: 700px;
     top: 139px;
     bottom: 110px;
 }
 th {
     text-align:left;
 }
 td {
     border-spacing:0;
     white-space:nowrap;
     overflow: hidden;
     text-overflow: Ellipsis;
     -ms-text-overflow:Ellipsis;
 }
jqueryhtmlcssdatatables
15
Dunderklumpen

結局、最善の解決策は、内部テーブルの幅を次のように設定することでした。

table-layout:fixed;
width: 98% !important;

ここにリストされているすべてのソリューションには、望ましくないトリミング動作がありました。この方法でテーブルの幅を制限することで、水平スクロールバーを表示したり非表示にしたりできるように、テーブルの高さを動的に調整することもできました。

http://jsfiddle.net/FBpLA/15/

15
Dunderklumpen
.dataTables_scrollBody
{
 overflow-x:hidden !important;
 overflow-y:auto !important;
}

これはすべてのテーブルで機能しました。これは、FirefoxとIEの問題でもありました。chromeは、最初から問題なく処理されていました。

6
bjack

スクリプトでネイティブに修正するものが見つからない場合は、overflow-x: hidden;を.dataTables_scrollBodyに追加するだけです。残念ながら、おそらく、要素に既に適用されているインラインスタイルよりもその特異性を高めるために!importantを使用する必要もあります。

http://jsfiddle.net/SombreErmine/FBpLA/12/

5
jsea

Cssタグoverflow-x:hidden;を使用して、ID mytable2のテーブルの水平スクロールバーを削除できます。

#mytable2 
{    
  overflow-y:scroll;
  overflow-x:hidden; 
}

ただし、table-layout:fixedを使用すると、これは機能しません。ブラウザの大部分は、CSSを監視するのではなく、自然な動作でオーバーフローを処理します。

Mozillaによるtable-layout:fixedに関する情報： https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

フィドルの例： http://jsfiddle.net/FBpLA/9/

4
Bigalow

データテーブルはデフォルトでテーブルの幅を計算し、インラインスタイルとしてテーブル要素に適用します（これは autoWidth と呼ばれます）。したがって、これを無効にせずに、指定した幅設定をテーブルが順守するように強制する際に問題が発生する可能性があります。 （ ここ を参照してください。）テーブル設定でautoWidth: falseを設定して無効にします。

次に、dataTables_scrollBodyまたはテーブルに幅のスタイルを適用できます。例えば：

.dataTables_scrollBody {
    width: 98%
}

これにより、インラインの幅がユーザーの指定した設定を台無しにしないようにしながら、水平スクロールを無効にすることによるトリミングが防止されます。 !importantの使用を避けることもできます。

0
Drew Marshburn

テーブルを初期化する前に、CSS属性を編集する必要がありますod divにはテーブルラベルが含まれています。

$('.table-div-container').css({'overflow-x': 'hidden','border': 'none'});
0
Felipe