如何将不同格式的两列组合在一起？

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; 
}