I have data where each row has an ID. For some rows, the IDs match others. This means that they are part of the same "group". They may have values in different columns, but they don't over lap. I'm trying to squash the rows with the same IDs, but can't figure it out, (so in the example below, the result would just have 3 rows, for IDs 1 2 and 3)
Example (run the snippet):
I've tried using aggregate, but I can't find a concat function for Strings. Thanks.
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l">ID</th>
<th class="tg-yw4l">Name</th>
<th class="tg-yw4l">Info</th>
<th class="tg-yw4l">A</th>
<th class="tg-yw4l">B</th>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l">Jack</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l">Marin</td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">X</td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l">X</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l">Giraffe</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
</tr>
</table>
Related
Alignment of borders of table using bootstrap table-bordered class is not proper when scrollbar appears, Itried many workarounds, but problem is still there, can someone please help?
Here is my hbs:
<title>UI</title>
<div ng-controller="appCtrl">
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;table-layout:fixed;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:block;height:164px;overflow:auto;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
Alignment is not proper: 1
Try this out, the major cause of the issue of border not aligning is table-layout:fixed; on the thead. You can run it an see
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:table;height:164px;overflow:auto; table-layout:fixed;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Knowing that the HandsOnTable plugin controls the tr elements of it's internal table how can scrollbars be reliably added to it?
I have built this HoT code successfully...
https://jsfiddle.net/horacebury/2vc606wx/
I then implemented that code in my solution and the rendered version of the code produces this...
https://jsfiddle.net/horacebury/60gphk7j/
The problem, as I see it, is that the HoT table does not have a row for every data item I want to show. In this case it is rendering about 18 tr elements in the table at any time, whereas I know the dataset has 288 items. I know that is a lot.
What I'm looking for is either a CSS solution to ensuring I've got scrollbars on the HoT table or some way to force HoT to load and render all the rows in the table, which I assume will cause scrollbars.
Just to illustrate (and because I have to post some code) the table is rendered as this, which I think is clearly wrong and likely to be causing the scrollbars not to render...
<table class="htCore">
<colgroup>
<col style="width: 150px;">
<col style="width: 75px;">
<col style="width: 75px;">
</colgroup>
<thead>
<tr>
<th class="" style="height: 25px;">
<div class="relative"><span class="colHeader">Date</span></div>
</th>
<th class="">
<div class="relative"><span class="colHeader">New</span></div>
</th>
<th class="">
<div class="relative"><span class="colHeader">Current</span></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="htDimmed">21/02/2017 00:00</td>
<td class="htRight htNumeric">2.00</td>
<td class="htRight htNumeric htDimmed">2.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:05</td>
<td class="htRight htNumeric">11.00</td>
<td class="htRight htNumeric htDimmed">11.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:10</td>
<td class="htRight htNumeric">4.00</td>
<td class="htRight htNumeric htDimmed">4.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:15</td>
<td class="htRight htNumeric">29.00</td>
<td class="htRight htNumeric htDimmed">29.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:20</td>
<td class="htRight htNumeric">70.00</td>
<td class="htRight htNumeric htDimmed">70.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:25</td>
<td class="htRight htNumeric">12.00</td>
<td class="htRight htNumeric htDimmed">12.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:30</td>
<td class="htRight htNumeric">70.00</td>
<td class="htRight htNumeric htDimmed">70.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:35</td>
<td class="htRight htNumeric">97.00</td>
<td class="htRight htNumeric htDimmed">97.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:40</td>
<td class="htRight htNumeric">42.00</td>
<td class="htRight htNumeric htDimmed">42.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:45</td>
<td class="htRight htNumeric">91.00</td>
<td class="htRight htNumeric htDimmed">91.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:50</td>
<td class="htRight htNumeric">80.00</td>
<td class="htRight htNumeric htDimmed">80.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 00:55</td>
<td class="htRight htNumeric">17.00</td>
<td class="htRight htNumeric htDimmed">17.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:00</td>
<td class="htRight htNumeric">22.00</td>
<td class="htRight htNumeric htDimmed">22.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:05</td>
<td class="htRight htNumeric">99.00</td>
<td class="htRight htNumeric htDimmed">99.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:10</td>
<td class="htRight htNumeric">57.00</td>
<td class="htRight htNumeric htDimmed">57.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:15</td>
<td class="htRight htNumeric">91.00</td>
<td class="htRight htNumeric htDimmed">91.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:20</td>
<td class="htRight htNumeric">92.00</td>
<td class="htRight htNumeric htDimmed">92.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:25</td>
<td class="htRight htNumeric">76.00</td>
<td class="htRight htNumeric htDimmed">76.00</td>
</tr>
<tr>
<td class="htDimmed">21/02/2017 01:30</td>
<td class="htRight htNumeric">24.00</td>
<td class="htRight htNumeric htDimmed">24.00</td>
</tr>
</tbody>
</table>
I have a table with, let's say, 20 rows. I know I can use the nth-child css to change the background of the rows, but I don't know how to change the background for a repeating range of rows. For example, I want row 1-3 green, 4-6 white, 7-9 green,etc..
I tried chaining the nth-child, but I can't come up with the correct results.
This resembles the table I have:
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
any help is greatly appreciated!!!
You can use formulas in nth-child:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
This will select every 6th child and the two subsequent ones (means: always the first three out of six).
Tailored to your example:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
tr {
background-color: red;
}
tr:nth-child(n+4) {
background-color: green;
}
tr:nth-child(n+7) {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
</body>
</html>
Try this
.table tr:nth-child(3n + 1) td:nth-child(odd) {
background: blue;
}
.table tr:nth-child(3n + 1) td:nth-child(even) {
background: green;
}
.table tr:nth-child(3n + 1) td:first-child {
background: red;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) {
background: orange;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(even) {
background: black;
}
.table tr:nth-child(3n + 1) + tr + tr td {
background: yellow;
}
<table border=1 class="table">
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
Appears in firefox only. Just add linebreak at the beginning of 1 cell to see what happens, or see screenshot.
What I want:
1. Column width must stay constant
2. Table must grow only in height
<style>
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
}
</style>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr>
<td contenteditable="true">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td contenteditable="true">3,5</td>
<td contenteditable="true">36</td>
<td contenteditable="true">23</td>
</tr>
<tr>
<td contenteditable="true">35,5</td>
<td contenteditable="true">4</td>
<td contenteditable="true">36⅔</td>
<td contenteditable="true">23–23,5</td>
</tr>
<tr>
<td contenteditable="true">36</td>
<td contenteditable="true">4,5</td>
<td contenteditable="true">37⅓</td>
<td contenteditable="true">23,5</td>
</tr>
<tr>
<td contenteditable="true">36,5</td>
<td contenteditable="true">5</td>
<td contenteditable="true">38</td>
<td contenteditable="true">24</td>
</tr>
<tr>
<td contenteditable="true">37</td>
<td contenteditable="true">5,5</td>
<td contenteditable="true">38⅔</td>
<td contenteditable="true">24,5</td>
</tr>
<tr>
<td contenteditable="true">38</td>
<td contenteditable="true">6</td>
<td contenteditable="true">39⅓</td>
<td contenteditable="true">25</td>
</tr>
<tr>
<td contenteditable="true">38,5</td>
<td contenteditable="true">6,5</td>
<td contenteditable="true">40</td>
<td contenteditable="true">25,5</td>
</tr>
<tr>
<td contenteditable="true">39</td>
<td contenteditable="true">7</td>
<td contenteditable="true">40⅔</td>
<td contenteditable="true">25,5–26</td>
</tr>
<tr>
<td contenteditable="true">40</td>
<td contenteditable="true">7,5</td>
<td contenteditable="true">41⅓</td>
<td contenteditable="true">26</td>
</tr>
<tr>
<td contenteditable="true">40,5</td>
<td contenteditable="true">8</td>
<td contenteditable="true">42</td>
<td contenteditable="true">26,5</td>
</tr>
<tr>
<td contenteditable="true">41</td>
<td contenteditable="true">8,5</td>
<td contenteditable="true">42⅔</td>
<td contenteditable="true">27</td>
</tr>
<tr>
<td contenteditable="true">42</td>
<td contenteditable="true">9</td>
<td contenteditable="true">43⅓</td>
<td contenteditable="true">27,5</td>
</tr>
<tr>
<td contenteditable="true">43</td>
<td contenteditable="true">9,5</td>
<td contenteditable="true">44</td>
<td contenteditable="true">28</td>
</tr>
<tr>
<td contenteditable="true">43,5</td>
<td contenteditable="true">10</td>
<td contenteditable="true">44⅔</td>
<td contenteditable="true">28–28,5</td>
</tr>
<tr>
<td contenteditable="true">44</td>
<td contenteditable="true">10,5</td>
<td contenteditable="true">45⅓</td>
<td contenteditable="true">28,5–29</td>
</tr>
<tr>
<td contenteditable="true">44,5</td>
<td contenteditable="true">11</td>
<td contenteditable="true">46</td>
<td contenteditable="true">29</td>
</tr>
<tr>
<td contenteditable="true">45</td>
<td contenteditable="true">11,5</td>
<td contenteditable="true">46⅔</td>
<td contenteditable="true">29,5</td>
</tr>
<tr>
<td contenteditable="true">46</td>
<td contenteditable="true">12</td>
<td contenteditable="true">47⅓</td>
<td contenteditable="true">30</td>
</tr>
<tr>
<td contenteditable="true">46,5</td>
<td contenteditable="true">12,5</td>
<td contenteditable="true">48</td>
<td contenteditable="true">30,5</td>
</tr>
<tr>
<td contenteditable="true">47</td>
<td contenteditable="true">13</td>
<td contenteditable="true">48⅔</td>
<td contenteditable="true">31</td>
</tr>
<tr>
<td contenteditable="true">48</td>
<td contenteditable="true">13,5</td>
<td contenteditable="true">49⅓</td>
<td contenteditable="true">31,5</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/s8q0evkf/
Use max-width to set a maximum width
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
max-width: 200px;
}
The overflowing content will now overflow in height instead of the width.
Documentation: http://www.w3schools.com/cssref/pr_dim_max-width.asp
Alright, let's try this again.
This is part of the code of my table right now.
<table id="infantryTbl">
<thead>
<tr>
<th class="country">Country</th>
<th class="type">Type</th>
<th class="nr">Nr</th>
<th class="name">Name</th>
<th class="marking">Markings</th>
<th class="comment">Comment</th>
<th class="status">Status</th>
<th class="code">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
</tbody>
</table>
With this css I do get every other <tr> in a different color.
table tr:nth-child(odd) td{
background:#c1c1c1;color:#1f1f1f;
}
table tr:nth-child(even) td{
background:#b0b0b0;color:#1f1f1f;
}
All good so far.
What I want is to change the background and text color on all the cells with the class "painted" and rows with the class "titel".
*.titel {background:#424242;}
.painted {background:#375e37;}*
As it is now nothing happens when I change the class since the odd/even CSS seems to override everything.
How to I make "titel" and "painted" shown?
Because you used table tr td for your odd/even rules, you need the same specificity (or higher) for your override rules, which means you can't use only the class names, like .painted, as you see in my last rule. It just doesn't do anything.
table tr:nth-child(odd) td{
background:#c1c1c1;color:#1f1f1f;
}
table tr:nth-child(even) td{
background:#b0b0b0;color:#1f1f1f;
}
table tr td.painted { /* this works */
background:yellow;
color:red;
}
table tr td.titel { /* this works */
background:red;
color:black;
}
.painted { /* this one doesn't work */
background:lime;
}
<table id="infantryTbl">
<thead>
<tr>
<th class="country">Country</th>
<th class="type">Type</th>
<th class="nr">Nr</th>
<th class="name">Name</th>
<th class="marking">Markings</th>
<th class="comment">Comment</th>
<th class="status">Status</th>
<th class="code">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
</tbody>
</table>