CSSコードのためのクラスを作成します

Question

コードの下記の部分のためのカスタムCSSクラスを作成します。私はWordPressの表を表示するためにこのコードを使用しています。誰でも、このコードのための別のCSSクラスを作成するためのガイドをしてください。おかげ

body { 
    font-family: "Open Sans", sans-serif; 
    line-height: 1.25; 
} 
table { 
    border: 1px solid #ccc; 
    border-collapse: collapse; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    table-layout: fixed; 
} 
table caption { 
    font-size: 1.5em; 
    margin: .5em 0 .75em; 
} 
table tr { 
    background: #f8f8f8; 
    border: 1px solid #ddd; 
    padding: .35em; 
} 
table th, 
table td { 
    padding: .625em; 
    text-align: center; 
} 
table th { 
    font-size: .85em; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
} 
@media screen and (max-width: 600px) { 
    table { 
    border: 0; 
    } 
    table caption { 
    font-size: 1.3em; 
    } 
    table thead { 
    border: none; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    } 
    table tr { 
    border-bottom: 3px solid #ddd; 
    display: block; 
    margin-bottom: .625em; 
    } 
    table td { 
    border-bottom: 1px solid #ddd; 
    display: block; 
    font-size: .8em; 
    text-align: right; 
    } 
    table td:before { 
    /* 
    * aria-label has no advantage, it won't be read inside a table 
    content: attr(aria-label); 
    */ 
    content: attr(data-label); 
    float: left; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 
    table td:last-child { 
    border-bottom: 0; 
    } 
} 

Answer 1

事前にすることは、あなたのテーブル<table class="sep-table">のようなクラスを与えるが、あなたのCSSに

body { 
    font-family: "Open Sans", sans-serif; 
    line-height: 1.25; 
} 
.sep-table { 
    border: 1px solid #ccc; 
    border-collapse: collapse; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    table-layout: fixed; 
} 
.sep-table caption { 
    font-size: 1.5em; 
    margin: .5em 0 .75em; 
} 
.sep-table tr { 
    background: #f8f8f8; 
    border: 1px solid #ddd; 
    padding: .35em; 
} 
.sep-table th, 
.sep-table td { 
    padding: .625em; 
    text-align: center; 
} 
.sep-table th { 
    font-size: .85em; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
} 
@media screen and (max-width: 600px) { 
    .sep-table { 
    border: 0; 
    } 
    .sep-table caption { 
    font-size: 1.3em; 
    } 
    .sep-table thead { 
    border: none; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    } 
    .sep-table tr { 
    border-bottom: 3px solid #ddd; 
    display: block; 
    margin-bottom: .625em; 
    } 
    .sep-table td { 
    border-bottom: 1px solid #ddd; 
    display: block; 
    font-size: .8em; 
    text-align: right; 
    } 
    .sep-table td:before { 
    /* 
    * aria-label has no advantage, it won't be read inside a table 
    content: attr(aria-label); 
    */ 
    content: attr(data-label); 
    float: left; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 
    .sep-table td:last-child { 
    border-bottom: 0; 
    } 
}