javascript - テーブルのcssが{width：100％}の場合、フローチャートの凡例は左側に移動します

Question

テーブル{width：100％}のcssの場合、フローチャートの凡例は左側に移動します。

これは、サイト全体に適用されるcssであるため、テーブル{width：100％}を維持したい場合にできることはありますか？

jsfiddle

Answer 1

Flotチャートの親要素にIDまたはクラスがある場合は、次のように、その親内のテーブルの幅のみをオーバーライドできます。

#placeholder table { width: 200px !important; }

ただし、これは実際にはハックです。制限は明らかです。

本当の解決策は、既存のルールを取り除くことです。グローバルテーブルルールは本当に悪い考えであり、この問題はその理由を正確に示しています。遅かれ早かれ、別のコンテキストで同じことが再び発生し、修正するのがはるかに困難になる可能性があります。

あなたの質問が反対票を投じられている理由は、あなたがグローバルなテーブルルールを持っていると聞いたときに真面目なウェブデザイナーがうずくまるからです。

次のいずれかの方法で問題を解決する必要があります。

1. テーブルにクラスを与えます。つまり<table class="myclass" ...>、100％の幅をtable.myclassルールに入れます。

2. .my-tables tableテーブルが親を共有している場合は、その親にクラスを指定してから、お住まいの地域のテーブルにのみ影響を与えるようなルールを使用してください。