2012-03-30 6 views
0

jQueryテーマローラーからテーマを作成してテーブル(DataTable.net)に適用しました。jQueryテーマローラーで設定したテーブル幅をオーバーライドする

問題は、ローラーがjQueryを使用してテーブルに幅を適用していることです。私のCSSファイルで幅を定義しようとしています。スクロールバーを表示させる余分なpxがいくつかあるので、そうでなければこれはうまくいきました。私は、ユーザーがおそらく列のサイズを増やす前にバーが表示されないように幅を持たせたいと思っています。

私は列のサイズを小さくしようとしましたが、そのサイズは他の列に再分配されています。

ローラーが追加するスタイルをどのように上書きするか考えている人はいますか?

答えて

-2

CSSを使用してスタイル属性に幅を設定すると、スタイルシート内のすべてのルールが上書きされます。さらに、ルールの最後に "!important"を追加してみてください。

.element { width: 100px !important; } 
+0

!重要なのは最後の手段です。あなたが必要とするのは、あなたが言うように他のルールを上書きするべきである同じ特異性のより最近のルールを持つことだけです。または、注文があなたのコントロールから外れている場合は、それをより具体的にしてください。 '#container .element'は例えば"勝つ "でしょう。あまりにも多くの特異性の戦争に従事したいとは思わないが、それはより良い選択肢であることを保っている!重要な –

+0

これを試してもうまくいかなかった。 – Nicsoft

2

私はThemeRollerテーマがデフォルトで100%の幅を与えると信じています。これの美しさは、あなたがしなければならないことは、それを別の容器に包むことだけです。絶対的な意味のないセマンティクスの純粋主義者にとって、これはマークアップの観点から可能な限り最良の目的を果たさないDOM内の余分なノードです。私自身、このような場合にはラッパーを追加したいと思っています。

I(ので、ページ幅のない100%!)ThemeRollerのとのDataTableのグリッドを使用しています。ここに私のマークアップのスケルトンです:

<div id="someTable" class="halfbox"> 
    <table id="dataTable-foo"></table> 
</div> 

とCSSはいくつかのルールがありますが、沸騰まで:

.halfbox { width: 50%; /* or fixed pixel value */ } 

私は、50%が文字通り完全に(マージン、パディング、などを)うまくいく疑うだろうが、あなたのアイデアを得る:それは幅ではなく、テーブルを決定ラッパーです。

+0

実際には、DataTablesも使用しています。問題の1つは、私がオーバーフローしたことでした:スクロール; divラッパーでそれを削除すると、スクロールバーが削除されます。ただし、列(ColReorderWithResize)のサイズを大きくすると、スクロールバーが表示されませんが、テーブルではデフォルトのオーバーフロー値が使用され、divから拡張されます。私は今DTのスクロール機能をチェックアウトしなければならないと思います... – Nicsoft

+0

私はあなたの提案を試み、オーバーフローを使用して:そのdivの自動。しかしそれは問題ではありません。問題は、テーブルの幅を設定できないため、常にスクロールバーが表示されるように少し幅があることです。これはあなたのためにこれが好きではないですか? DT sScrollXを使用すると、テーブルが> 2500pxの幅になります...テーブルの初期化時に各列のサイズを定義しないためです。 – Nicsoft

+1

いいえ、スクロールバーはありません。私はすべての列のサイズを設定しません。私は手作業でFEWを指定しますが、すべてではありません。ただし、テーブルに関することは次のとおりです。列の幅は常にガイドラインです。あなたのテーブルが "持っていなければならない"場合、あなたのコンテンツに合うように幅が広がります。私はこれがあなたの問題だと思う。私は上記の答えでは言及しなかったが、私のTD要素にも 'overflow:hidden'と' text-overflow:省略形 'が設定されています(後者はブラウザーのサポートは限られていますが、 –

関連する問題