css - CSS テーブル要素

Question

私はいくつかの Web ページの更新の責任を継承しており、既存のデザインのパラメーター内で作業する必要がありますが、使用されるコーディングはすべて、すべてのテーブルセルに多くの書式設定を含むすべてのテーブルです。頑張っているだけで頭が痛くなる。スタイルを使用して簡素化したいのですが、いくつかの異なるスタイルが必要です。具体的には、表の見出しはすべて太字、中央揃え、1 つのフォントサイズであるため、行に対して 1 つのスタイルが取得されます。最初の列は太字で中央揃えにする必要があり、5 番目の列は中央揃えにする必要があります (ただし、通常のフォントの太さ)。他のすべての列は左揃えで、通常の太さです。列は白と色が交互に並んでいます。

だから私の質問は、色を変更するために2つのスタイルで行をスタイルできますか?次に、太字および/または中央揃えにする必要がある2つの列をどのようにスタイルしますか、またはこれを機能させるために各セルをスタイルする必要がありますか?

<tr style="height: 27.75pt">
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d2eaf1; padding-bottom: 0in; border-left: #78c0d4 1pt solid; width: 41.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="55">
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <strong><span style="font-size: 10pt; color: black; font-family: 'Tahoma','sans-serif'">2</span></strong></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 137.8pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="184">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Grace Episcopal Church</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 72.45pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="97">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Nyack</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 96.85pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="129">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">John Smith</span></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Tom Jones&nbsp;</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 63pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="84">
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">222-1234</span></p>
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">333-6789</span></p>
        </td>
        <td style="border-right: #78c0d4 1pt solid; padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 147.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt" valign="top" width="197">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:johnsmith@optonline.net"><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">johnsmith@optonline.net</span></a></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:tomjones@att.net"><u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">tomjones@att.net&nbsp;</span></u></a></p>
        </td>
    </tr>

内部スタイルシートを使用してほとんどのコードをクリーンアップしましたが、2 つの問題が残っています。各列の幅は、各列クラスの幅スタイルを使用して変更されません。また、フォントサイズを 11pt から 12pt に変更すると、テキストが 2 列で折り返されるため、テーブルの意図したデザインが失われます。この時点で、かなり簡単な調整が欠けていると確信しています。

問題があれば、独自の wysiwyg フロントエンドを備えたサイトを使用しており、ソースコードへのアクセスが制限されています。変更を加えることはできますが、完全に制御することはできません。

<style type="text/css">
.tablestyle {
border: #78c0d4 1pt solid;
cellpadding:none;
cellspacing: none;
border: medium none; 
border-collapse: collapse;
width: 740;
    table-layout: fixed;
}

#heading {
text-align:center;
line-height:normal;
font-size:26px;
font-family: Arial, Helvetica, sans-serif;
color:#252525;
}

.tablerowblue {
border: #78c0d4 1pt solid; 
background: #d2eaf1; 
border-right-color: #f0f0f0; 
vertical-align:top;
line-height: normal; 
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
}

.tablerowwhite {
border: #78c0d4 1pt solid; 
background: #ffffff; 
vertical-align:top;
line-height: normal; 
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
}

.tableheadbold {
padding: 0 5px; 
border: #78c0d4 1pt solid; 
background: #4bacc6; 
border-right-color: #f0f0f0; 
vertical-align:top;
text-align: center;
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}

.col1 {
width: 40;
font-weight:bold;
text-align:center;
border: #78c0d4 1pt solid;
}
.col2 {
width:80;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col3 {
width:70;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col4 {
width:170;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col5 {
width:140;
text-align:center;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col6 {
width:190;
color:black;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
</style>

<div>
&nbsp;</div>
<p id="heading">
Troops</p>
<p>
&nbsp;</p>
<table class="tablestyle">
<tbody>
    <tr class="tableheadbold">
        <td>
            Troop</td>
        <td>
            Chartered Organization<br />
            Meeting Location</td>
        <td>
            Town/City</td>
        <td>
            Unit Leader<br />
            Comm. Chair</td>
        <td>
            Phone</td>
        <td>
            E-Mail</td>
    </tr>
    <tr class="tablerowwhite">
        <td class="col1">
            2</td>
        <td class="col2">
            Grace Episcopal Church</td>
        <td class="col3">
            Nyack</td>
        <td class="col4">
            Leader Name 1<br />
            Leader Name 2</td>
        <td class="col5">
            222-1234<br />
            333-6789</td>
        <td class="col6">
        <a  href="mailto:johnsmith@optonline.net">johnsmith@optonline.net</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></td>
    </tr>
    <tr class="tablerowblue">
        <td class="col1">
            10</td>
        <td class="col2">
            Atonement Lutheran Church</td>
        <td class="col3">
            Stony Point</td>
        <td class="col4">
            Leader Name 1<br />
            Leader Name 2</td>
        <td class="col5">
            222-1234<br />
            333-6789</td>
        <td class="col6">
        <a href="mailto:johnsmith@optonline.net">johnsmith@optonline.net</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></td>
    </tr>


</tbody>
</table>

score 0 · Accepted Answer

疑似セレクターを使用して特定のtdをターゲットにできnth-childます。そうすれば、すべてのtdを調べて、クラスを1つずつ追加する必要がなくなります。

ここで簡単なデモ：http：//jsfiddle.net/Ftb6x/

残念ながら、すべてのブラウザがそれをサポートしているわけではありません：http: //caniuse.com/#search=nth-child

score 0 · Accepted Answer

クラスセレクターを使用します。

.tableStyle td {
  text-align:left;
}

.row_w td {
  background-color:#fff;
}

.row_c td {
  background-color:#ffc;
}

.col_1 {
  font-weight:bold;
  text-align:center;
}

.col_5 {
  text-align:center;
}

.row_h { /*anytime you want to customize */ }

HTML

<table class="tableStyle" >
  <tr class="row_h" ><th ></th>.. <th></td></tr>
  <tr class="row_w" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
  <tr class="row_c" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
</table>

残りのTD/THは、TRクラススタイルで指示されたスタイルに従います。

score 0 · Accepted Answer

マークアップは、Microsoft Word で作成されたようです。そこにあるすべての表示上の混乱、特にポイント単位またはポイントの分数で設定されたセル幅をオーバーライドすることは困難です。マークアップをクリーンアップすることをお勧めします。そのための小さなユーティリティがあります。pセル内の無意味なマークアップは削除されませんが、そのマークアップはレンダリング時に効果的に無視できます。

th p, td p { margin: 0; }

クリーンアップされたドキュメントを使用して、ページのフォントを設定し (Arial は退屈ですが、Tahoma よりは優れています)、表の境界線、セルの間隔、およびセルのパディングを適切に設定します。

次に、見出しのセル (これが「表の見出し」が指すものだと思います) を内の atrに入れ、セルtheadに使用thします。デフォルトでは太字で中央揃えになります。通常はテーブルの残りの部分と同じサイズにする必要がありますが、必要に応じて次のように大きくします。

thead th { font-size: 110%; }

見出しのように聞こえるので、最初の列を cellthにすることを検討するかもしれませんが、設定するだけで十分かもしれません

td:first-child { text-align: center; font-weight: bold; }

このようなスタイルは、コードスニペットのようなデータでは奇妙に見えますが、左揃えにする必要があるように見えます。同様に、電話番号を中央に配置することはほとんどありませんが、主張する場合は、この場合、設定によってこれを行うことができます

td:nth-child(5) { text-align: center; }

投稿されたコードスニペットのように、交互の背景色を設定するには、使用します

tr:nth-child(odd) { background: #d2eaf1; }

古いバージョンの IE (IE 8 以前) でもスタイルを機能させるために必要な余分な作業に対して誰かがあなたにお金を払っcolている場合は、要素を使用して列ベースのスタイルを追加するか、 Selectivzrポリフィルを使用することをお勧めします。

css - CSS テーブル要素

3 に答える 3

Related

Reference