web-dev-qa-db-ja.com

CSSテーブルをデフォルトの同等のものにリセット

私は事前に作成された購入済みのテンプレートを使用しています。このテンプレートの作成者は、思い通りの方法で何かを取得することがほとんど不可能になるような方法で物事を結び付けています。テンプレートのセクションに入ると、テンプレートのようにスタイルを設定する必要はありません。しかし、彼らのやり方のせいで、CSSを変更して何か他のことをすることはできません。テーブルを別のものとして分類し、好きなようにスタイルを設定しようとしましたが、常にどこかに引っ掛かることができ、作成者のスタイルがテーブルのいずれかの部分に残っています。それで、私はアイデアを思いつきました。最初に要素でこのクラスを呼び出し、次に次のようにスタイルを設定したいクラスを呼び出すことができる、テーブルに固有のクラスのようなリセットを作成してみませんか。

class="reset_table mynew_style"

だから私はそれを行う方法を考え出そうとしていますが、行き詰まっています。

.reset_table, 
.reset_table table tr,
.reset_table tr td,
.reset_table table tbody,
.reset_table table thead,
.reset_table table tfoot,
.reset_table table tr th,
.reset_table table tfoot tr tf
{
    margin:0;
    padding:0;
    background:none;
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    background-image:none;
}

これはほぼ完全に機能しているように見えますが、まだいくつかの問題が残っています。ですから、ここにいる誰かが私がこれのより良いバリエーションを思いつくのを手伝ってくれることを願っています。したがって、すべてのベースは、テーブルを通常のデフォルトスタイルにリセットしようとするという意味でカバーされています。

htmlcsscss-tables
11
chris

これは古いスレッドですが、これが他の誰かを助ける場合：

.clear-user-agent-styles table,
.clear-user-agent-styles thead,
.clear-user-agent-styles tbody,
.clear-user-agent-styles tfoot,
.clear-user-agent-styles tr,
.clear-user-agent-styles th,
.clear-user-agent-styles td {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
th, td {
    display: inline;
}

それでも他の開発スタイルをオーバーライドしない場合は、このコードがそれらの後にあることを確認するか、親クラス、または必要に応じてIDを含めることでより具体的にしてください。各プロパティの値の末尾に！importantを追加しないようにしてください。ただし、これは、以前にコーディングされたものよりも優先される可能性があります。

14
bit-less