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
Related
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>
I have a table generated through a foreach (PHP) The problem is that I want to modify some specific cell on this table (in red) Knowing that I can not add a class, I must access it with a CSS style
EDIT :
I need add style to the first and last <td>, of the last <tr> with the .child class
Indeed, it is an ajax request that creates the <tr> with .child class So sometimes there are 2 <tr> and sometimes 10 <tr>
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
jsiddle
I tried several things like:
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
But nothing works .. How to do?
This will work for you.
I have used nth-last-child(2) to target the td's in red.
My added Code:
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
But some of the styles are there which comes from bootstarap css so if you want to over-right them also you will have to use !important in your style.
sample -
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px !important;
}
Hope this was helpfull for you.
This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 5 years ago.
I'm stuck on a table design.
My headers aren't lining up with my body tds, and my scroll is throwing off alignment.
I imagine I could just use a
table-header-group
However, that loses my scroll.
If I put it an a div, then I lose my header to the scroll.
Attached is a fiddle for viewing.
Anyways, How can I:
1. Align my head with the body
2. use scroll in the Y
3. Fit the data using as a responsive table
First, Fiddle with weird CSS "display:" usage
Fiddle
Updated Fiddle height of 80px overridden:
https://jsfiddle.net/t1zss67n/4/
Your display reset could be on every tr, then adding a padding to thead of equal average width of the scrollbar should do. https://jsfiddle.net/t1zss67n/5/
actually very similar to How to set tbody height with overflow scroll
thead {
display:block;
padding-right:17px ;
}
thead tr, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.thead {
background-clip: padding-box;
background-color: #f5f5f5;
background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
background-repeat: repeat-x;
font-weight: 700;
font-size: 12px;
}
table ,tr td{
border:1px solid red
}
tbody {
max-height: 800px;
}
tbody {
display:block;
overflow-y:scroll;
}
thead {
display:block;
padding-right:17px ;
}
thead tr, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
tr td:first-child {
width: 60px;
}
.table-hover>tbody>tr:hover> td{
background-color: #ffa;
border-bottom-color: #ffa;
}
.table-hover>tbody>tr>td:hover:not(:first-child) {
background-color: #fff;
border: 1px solid #aaa;
}
td {
text-overflow: ellipsis;
width: 10px;
white-space: nowrap;
overflow: hidden;
padding: 2px;
}
<table class="table table-hover table-responsive">
<thead>
<tr class="thead">
<td>Name</td>
<td>Nov16</td>
<td>Dec16</td>
<td>Jan17</td>
<td>Feb17</td>
<td>Mar17</td>
<td>Apr17</td>
<td>May17</td>
<td>Jun17</td>
<td>Jul17</td>
<td>Aug17</td>
<td>Sept17</td>
<td>Oct17</td>
<td>RTM</td>
<td >2012</td>
<td>2013</td>
<td>2014</td>
<td>2015</td>
<td>2016</td>
<td>YTD</td>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="text-left">Gabe Maloney</td>
<td class="text-right">253</td>
<td class="text-right">229</td>
<td class="text-right">78</td>
<td class="text-right">36</td>
<td class="text-right">236</td>
<td class="text-right">107</td>
<td class="text-right">106</td>
<td class="text-right">246</td>
<td class="text-right">66</td>
<td class="text-right">71</td>
<td class="text-right">172</td>
<td class="text-right">235</td>
<td class="text-right ttm">1728</td>
<td class="text-right">1943</td>
<td class="text-right">1275</td>
<td class="text-right">1810</td>
<td class="text-right">225</td>
<td class="text-right">985</td>
<td class="text-right ytd">896</td>
</tr>
<tr role="row">
<td class="text-left">Adrien Johnson</td>
<td class="text-right">274</td>
<td class="text-right">291</td>
<td class="text-right">195</td>
<td class="text-right">133</td>
<td class="text-right">171</td>
<td class="text-right">19</td>
<td class="text-right">79</td>
<td class="text-right">31</td>
<td class="text-right">262</td>
<td class="text-right">208</td>
<td class="text-right">58</td>
<td class="text-right">117</td>
<td class="text-right ttm">1819</td>
<td class="text-right">1799</td>
<td class="text-right">1010</td>
<td class="text-right">336</td>
<td class="text-right">417</td>
<td class="text-right">1803</td>
<td class="text-right ytd">755</td>
</tr>
<tr role="row">
<td class="text-left">Axel Johnson</td>
<td class="text-right">275</td>
<td class="text-right">294</td>
<td class="text-right">232</td>
<td class="text-right">80</td>
<td class="text-right">128</td>
<td class="text-right">143</td>
<td class="text-right">255</td>
<td class="text-right">235</td>
<td class="text-right">186</td>
<td class="text-right">48</td>
<td class="text-right">97</td>
<td class="text-right">199</td>
<td class="text-right ttm">2029</td>
<td class="text-right">1031</td>
<td class="text-right">787</td>
<td class="text-right">333</td>
<td class="text-right">1259</td>
<td class="text-right">1261</td>
<td class="text-right ytd">1020</td>
</tr>
<tr role="row">
<td class="text-left">George Johnson</td>
<td class="text-right">39</td>
<td class="text-right">102</td>
<td class="text-right">127</td>
<td class="text-right">171</td>
<td class="text-right">128</td>
<td class="text-right">283</td>
<td class="text-right">201</td>
<td class="text-right">231</td>
<td class="text-right">34</td>
<td class="text-right">150</td>
<td class="text-right">76</td>
<td class="text-right">80</td>
<td class="text-right ttm">1339</td>
<td class="text-right">907</td>
<td class="text-right">1221</td>
<td class="text-right">1876</td>
<td class="text-right">999</td>
<td class="text-right">2012</td>
<td class="text-right ytd">772</td>
</tr>
<tr role="row">
<td class="text-left">Reek Jones</td>
<td class="text-right">224</td>
<td class="text-right">109</td>
<td class="text-right">162</td>
<td class="text-right">192</td>
<td class="text-right">226</td>
<td class="text-right">270</td>
<td class="text-right">257</td>
<td class="text-right">65</td>
<td class="text-right">137</td>
<td class="text-right">172</td>
<td class="text-right">168</td>
<td class="text-right">173</td>
<td class="text-right ttm">1885</td>
<td class="text-right">1086</td>
<td class="text-right">649</td>
<td class="text-right">447</td>
<td class="text-right">480</td>
<td class="text-right">825</td>
<td class="text-right ytd">972</td>
</tr>
<tr role="row">
<td class="text-left">JP Lefkort</td>
<td class="text-right">76</td>
<td class="text-right">82</td>
<td class="text-right">18</td>
<td class="text-right">54</td>
<td class="text-right">27</td>
<td class="text-right">240</td>
<td class="text-right">50</td>
<td class="text-right">248</td>
<td class="text-right">197</td>
<td class="text-right">294</td>
<td class="text-right">20</td>
<td class="text-right">262</td>
<td class="text-right ttm">1328</td>
<td class="text-right">2007</td>
<td class="text-right">143</td>
<td class="text-right">1126</td>
<td class="text-right">803</td>
<td class="text-right">1771</td>
<td class="text-right ytd">1071</td>
</tr>
<tr role="row">
<td class="text-left">Susan Segal</td>
<td class="text-right">101</td>
<td class="text-right">236</td>
<td class="text-right">95</td>
<td class="text-right">204</td>
<td class="text-right">213</td>
<td class="text-right">197</td>
<td class="text-right">292</td>
<td class="text-right">49</td>
<td class="text-right">44</td>
<td class="text-right">75</td>
<td class="text-right">137</td>
<td class="text-right">49</td>
<td class="text-right ttm">1495</td>
<td class="text-right">1215</td>
<td class="text-right">1667</td>
<td class="text-right">546</td>
<td class="text-right">753</td>
<td class="text-right">849</td>
<td class="text-right ytd">646</td>
</tr>
<tr role="row">
<td class="text-left">Antonio Townsend</td>
<td class="text-right">244</td>
<td class="text-right">198</td>
<td class="text-right">98</td>
<td class="text-right">262</td>
<td class="text-right">281</td>
<td class="text-right">141</td>
<td class="text-right">219</td>
<td class="text-right">273</td>
<td class="text-right">123</td>
<td class="text-right">68</td>
<td class="text-right">15</td>
<td class="text-right">114</td>
<td class="text-right ttm">1895</td>
<td class="text-right">143</td>
<td class="text-right">1612</td>
<td class="text-right">1564</td>
<td class="text-right">148</td>
<td class="text-right">1042</td>
<td class="text-right ytd">812</td>
</tr>
</tbody>
</table>
Answered: Do not scroll table headings when scrolling down a html table
See specifically:
http://www.imaputz.com/cssStuff/bigFourVersion.html
This fiddle may provide the best solution though
jsfiddle.net/deborah/Msvvr/
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>
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>