Как объединить два столбца с различным форматированием?

Question

Я пытаюсь создать таблицу в 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

Простейший способ, которым я мог подумать, это не беспокоиться о раскраске внутри определенных столбцов, а затем просто убедиться, что вторая ячейка в каждой строке имеет один и тот же цвет, используя: 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

Есть миллион других способов сделать это, без таблиц. (Например, Bootstrap имеет 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

Вы можете использовать дисплей: Flex

проверки следующего фрагмент

.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 (*)), поэтому вам следует удалить col.vba из селекторов, связанных с tr.
И вы можете выбрать эти ячейки в 1-м столбце каждой нечетной строки с помощью :nth-child(odd), например, и создать их ячейки td:first-child.
(*) col + tr бы выбрать что-то: тр после Col элемент, но это все из них здесь, так что ничего полезнее, чем простой 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>

EDIT: если вы хотите, чтобы ширина составляла 70%/30%, независимо от длины содержимого в столбцах, вы должны использовать другойtable layout algorithm (MDN), который делает то, что хочет автор, а не то, что содержимое может изменять его длина:

table { 
    table-layout: fixed; 
}