如何將不同格式的兩列組合在一起？

Question

我想在HTML中生成一個表格，在第一列中包含一些代碼示例，其中第二列包含交替行顏色，第二列包含註釋。

這是一個粗糙的小樣就是我去爲：

而且這是我當前的代碼產生：

的HTML和CSS的我使用的是這些：

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

我能想到的最簡單的方法就是不用擔心在特定列中着色，然後確保每行中的第二個單元格使用相同的顏色：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

還有其他一些方法可以讓你做到這一點，沒有表格。 （例如，引導程序使用div.row代替tr），但是如果選擇當前代碼，則需要爲每個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，就好像它們屬於某個col或將其作爲父母一樣。事實並非如此。您必須按照兩種不同的規則以某種方式和第n個單元以相關方式對第n個單元格進行設計。

tr沒有col元素作爲父項（但作爲兄弟姐妹...所有現有col S的，所以你不能做任何有用的CSS（*）），所以你應該從相關TR選擇刪除col.vba。
你可以選擇這些細胞在每個奇數行的第1列與:nth-child(odd)例如和他們的風格細胞td:first-child。
（*）col + tr會選擇一些東西：TR下一個山坳元素，但是這就是所有的人都在這裏，所以沒有什麼比在一個簡單的tr :)

這裏我刪除對col相關的東西和風格的（細胞更實用的repective） 「列」 與td:first-child和td:last-child（還與td:nth-child(2)和有用的，如果你已經3+列）

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>

編輯：如果你想寬度爲70％/ 30％，無論在欄目內容的長度，你應該使用其他table layout algorithm（MDN），在一個沒有作者想要什麼，而不是什麼樣的內容可以通過修改其長度：

table { 
    table-layout: fixed; 
}