2つの列を異なる書式で組み合わせるにはどうすればよいですか？

Question

私は、最初の列に行の色が交互に表示されているコード例とコメントを含む2列目のコード例をHTMLで作成しようとしています。

これは、私が行くよ何の大まかなモックアップです：

そして、これは私の現在のコードが生成するものです：

HTMLとCSS I使用しているのは次のとおりです：

table.codepack { 
 
     margin-left: 250px; 
 
     width: 80%; 
 
    } 
 
    
 
    col.vba { 
 
     border-left: 1px solid #8bd5e6; 
 
     font-family: Courier, monospace; 
 
     font-size: small: 
 
     padding: 0; 
 
     width: 70%; 
 
    } 
 
    
 
    col.vba tr:nth-child(odd) { 
 
     background-color: #b8eaef; 
 
    } 
 
    
 
    col.vba tr:nth-child(even) { 
 
     background-color: #d0eef4; 
 
    } 
 
     
 
    col.notes { 
 
     width: 30%; 
 
    } 
 
    
 
    div.comment { 
 
     margin: 3px; 
 
     border: 1px solid #e6b000; 
 
     border-radius: 6px; 
 
     background-color: #fff9e6; 
 
     font-family: Calibri, Arial, sans-serif; 
 
     font-size: small; 
 
     font-style: italic; 
 
    }

<table class=codepack> 
 
    <col class="vba"><col class="notes"> 
 
    <tr> 
 
    <td> Sub Newcode</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> IF RandomVar = True then</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> &nbsp;&nbsp;Random2 = Blue</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> ELSE</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

例えば、コメント <div> - -

いくつかのビットが働いているが、私は最初の列のために試した事のどれも良い結果を与えませんでした。私は.vbaと宣言してみましたが、両方ともtrとtdに固有のものですが、役に立たないものです。私はまた、nth-childスタイルを宣言するさまざまなバージョンを試しましたが、もう成功はありません。

どのように私はその結果を達成することができますか？私はテーブルを使用することに執着していない - 実際には、私はしたくない - しかし、私はより良い方法をオフハンドと考えることができませんでした。

Answer 1

私が考えることができる最も簡単な方法は、特定の列内で色付けすることを心配せずに、各行の2番目のセルがnth-of-typeを使用して同じ色であることを確認することでした。

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

tr:nth-child(even) { 
    background-color: #d0eef4; 
} 

td:nth-of-type(even) { 
    background-color: #fff; 
} 

CodePen Here.

Answer 2

これを行うには、テーブルを使用せずに100万種類もあります。 （たとえばブートストラップではtrの代わりにdiv.rowを使用しますが）現在のコードを選択する場合は、各tdにクラスを追加するか、tdの擬似セレクタで作業する必要があります。

table.codepack { 
 
     margin-left: 250px; 
 
     width: 80%; 
 
    } 
 

 
    col.vba { 
 
     border-left: 1px solid #8bd5e6; 
 
     font-family: Courier, monospace; 
 
     font-size: small: 
 
     padding: 0; 
 
     width: 70%; 
 
    } 
 
    
 
    col.vba tr:nth-child(odd) { 
 
     background-color: #b8eaef; 
 
    } 
 
    
 
    col.vba tr:nth-child(even) { 
 
     background-color: #d0eef4; 
 
    } 
 
     
 
    col.notes { 
 
     width: 30%; 
 
    } 
 
    
 
    div.comment { 
 
     margin: 3px; 
 
     border: 1px solid #e6b000; 
 
     border-radius: 6px; 
 
     background-color: #fff9e6; 
 
     font-family: Calibri, Arial, sans-serif; 
 
     font-size: small; 
 
     font-style: italic; 
 
    } 
 

 

 
td:first-child {background-color: yellow; }

<table class="codepack" cellpadding="0" cellspacing="0"> 
 
    <col class="vba"><col class="notes"> 
 
    <tr> 
 
    <td> Sub Newcode</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> IF RandomVar = True then</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> &nbsp;&nbsp;Random2 = Blue</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> ELSE</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

私はCELLSPACING = "0" とCELLPADDING = "0" を追加したメモ、およびCSSの最後のビット。

Answer 3

あなたは、ディスプレイを使用することができます：それは

を役に立てば幸い

次のスニペットをチェック

.code { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.sub-code { 
 
    display: flex; 
 
} 
 
.comment { 
 
    margin: 3px; 
 
    border: 1px solid #e6b000; 
 
    border-radius: 6px; 
 
    background-color: #fff9e6; 
 
    font-family: Calibri, Arial, sans-serif; 
 
    font-size: small; 
 
    font-style: italic; 
 
} 
 
.text { 
 
    border: 1px solid #8bd5e6; 
 
    padding: 0; 
 
    width: 40%; 
 
}

<div class="container"> 
 
    <div class="code"> 
 
    <code class="text">Sub Newcode</code> 
 

 
    <div class="sub-code"> 
 
     <code class="text">IF RandomVar = True then </code> 
 
     <div class="comment">This is a comment.</div> 
 
    </div> 
 
    <div class="sub-code"> 
 
     <code class="text"> Random2 = Blue </code> 
 
     <div class="comment">This is a comment.</div> 
 
    </div> 
 
    <code class="text">ELSE</code> 
 

 

 
    </div> 
 
</div>

を曲げます

Answer 4

colは幅を設定するのに問題ありません。 tdは、特定の列が所有していたか、親として所有していたかのように選択できません。そうではありません。 n番目の列を特定の方法で、n番目のセルを2つの異なる規則で関連する方法でスタイルする必要があります。

trcolの要素を親として持ちません（ただし、兄弟として...すべての既存のcolのなかで、CSS（*）でそれに役立つものは何もできないので、trに関連するセレクタからcol.vbaを削除する必要があります。
たとえば、奇数行の第1列のセルを:nth-child(odd)と選択し、セルのスタイルをtd:first-childとすることができます。
（*）col + trが何かを選択します：col要素を以下のTRは、それはここではそれらのすべてですので、簡単なtrよりも何よりも便利:)

ここで私は自分の中の細胞（COLに関連した何かを取り出して、スタイルtd:first-childとtd:last-child（あなたが3+の列をしている場合もtd:nth-child(2)と連携し、有益な）

table.codepack { 
 
     margin-left: 250px; 
 
     width: 80%; 
 
    } 
 
    
 
    td:first-child { 
 
     border-left: 1px solid #8bd5e6; 
 
     font-family: Courier, monospace; 
 
     font-size: small: 
 
     padding: 0; 
 
     width: 70%; 
 
    } 
 
    
 
    td:last-child { 
 
     width: 30%; 
 
    } 
 
    
 
    tr:nth-child(odd) td:first-child { 
 
     background-color: #b8eaef; 
 
    } 
 
    
 
    tr:nth-child(even) td:first-child { 
 
     background-color: #d0eef4; 
 
    } 
 
     
 
    div.comment { 
 
     margin: 3px; 
 
     border: 1px solid #e6b000; 
 
     border-radius: 6px; 
 
     background-color: #fff9e6; 
 
     font-family: Calibri, Arial, sans-serif; 
 
     font-size: small; 
 
     font-style: italic; 
 
    }

<table class=codepack> 
 
    <col class="vba"><col class="notes"> 
 
    <tr> 
 
    <td> Sub Newcode</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> IF RandomVar = True then</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> &nbsp;&nbsp;Random2 = Blue</td> 
 
    <td><div class="comment">This is a comment.</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td> ELSE</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

とrepective） "列"

EDIT：列のコンテンツの長さにかかわらず幅が70％/ 30％になるようにするには、以外のtable layout algorithm（MDN）を使用する必要があります。その長さ：

table { 
    table-layout: fixed; 
}