Alternate rows in one column only - CSS
As @afranz409 stated, the ideal solution would be to create a class. However, this can be done with a CSS specific solution, with limited browser capabilities (None of the IE browsers < 9):
table tr:nth-child(2n) > td:nth-child(1) {
background-color: #eee;
}
In other words, for every alternate row, within the first table column, fill the background color #eee. As seen on JsFiddle.
For a more cross-browser compatible solution, I would recommend using this selector within jQuery:
$('table tr:nth-child(2n) > td:nth-child(1)').css("background-color", "#eee");
Even Odd rows for only one column in tables?
https://jsfiddle.net/1b329d8u/2/ is what I was trying to achieve.
table.sidebyside { width: 800px; overflow-x: scroll;}.sidebyside th:nth-child(1), .sidebyside td:nth-child(1) { width: 300px !important; position:absolute;}.sidebyside th:nth-child(2), .sidebyside td:nth-child(2) { padding-left: 300px !important;}.sidebyside th { background-color: #4b91ea; height: 63px;} .sidebyside tr:nth-child(even) > td:nth-child(1) { background-color: #fff;}.sidebyside tr:nth-child(odd) > td:nth-child(1) { background-color: #f7fafa;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><div class="row"> <div class="col-md-12"> <div style="width:600px; overflow: auto;"> <table class="sidebyside table table-striped"> <tbody> <tr> <th></th> <th>Bronze-High Deductible</th> <th>Silver-HMO</th> <th>Gold-PPO Low</th> <th>Gold-PPO Med</th> </tr> <tr> <td><b>Score: </b></td> <td><span class="text-green">95 </span></td> <td><span class="text-yellow">77 </span></td> <td><span class="text-danger">32 </span></td> <td><span class="text-danger">24 </span></td> </tr> <tr> <td><b>RealCost: </b></td> <td>$4,7772.32</td> <td>$6,024.81</td> <td>$8,194.55</td> <td>$8,194.55</td> </tr> <tr> <td><b>Premiums: </b></td> <td>$2,400.00</td> <td>$3,100.00</td> <td>$3,956.00</td> <td>$3,956.00</td> </tr> <tr> <td><b>Cost of Services: </b></td> <td>$1,575.00</td> <td>$2,239.00</td> <td>$2,983.00</td> <td>$2,983.00</td> </tr> <tr> <td><b>Cost of Medications: </b></td> <td>$797.32</td> <td>$927.32</td> <td>$1,198.46</td> <td>$1,198.46</td> </tr> <tr> <td></td> <td colspan="4"></td> </tr> <tr> <td><b>Individual Deductible: </b></td> <td>$3,350.00</td> <td>$3,850.00</td> <td>$4,250.00</td> <td>$4,250.00</td> </tr> <tr> <td><b>Individual Out of Pocket Maximum: </b></td> <td>$6,350.00</td> <td>$6,850.00</td> <td>$7,050.00</td> <td>$7,050.00</td> </tr> <tr> <td><b>Family Deductible: </b></td> <td>$6,650.00</td> <td>$6,950.00</td> <td>$7,200.00</td> <td>$7,200.00</td> </tr> <tr> <td><b>Family Out of Pocket Maximum: </b></td> <td>$12,900.00</td> <td>$13,900.00</td> <td>$15,400.00</td> <td>$15,400.00</td> </tr> <tr> <td><b>Coinsurance: </b></td> <td>20%</td> <td>20%</td> <td>30%</td> <td>30%</td> </tr> <tr> <td><b>Copayment: </b></td> <td>$25.00</td> <td>$30.00</td> <td>$40.00</td> <td>$40.00</td> </tr> <tr> <td><b>Pharmacy Generic: </b></td> <td>$20.00</td> <td>$35.00</td> <td>$45.00</td> <td>$45.00</td> </tr> <tr> <td><b>Pharmacy Brand: </b></td> <td>$40.00</td> <td>$45.00</td> <td>$60.00</td> <td>$60.00</td> </tr> <tr> <td><b>Pharmacy Non Preferred: </b></td> <td>$60.00</td> <td>$70.00</td> <td>$80.00</td> <td>$80.00</td> </tr> <tr> <td><b>Mail Order Generic: </b></td> <td>$60.00</td> <td>$80.00</td> <td>$90.00</td> <td>$90.00</td> </tr> <tr> <td><b>Mail Order Brand: </b></td> <td>$80.00</td> <td>$90.00</td> <td>$100.00</td> <td>$100.00</td> </tr> <tr> <td><b>Mail Order Non Preferred: </b></td> <td>$120.00</td> <td>$140.00</td> <td>$175.00</td> <td>$175.00</td> </tr> </tbody> </table> </div> </div></div>css tables: fixed column with alternate row colors?
You can just add a special case to the col1 class like so:
table.standings tr:nth-child(even),
table.standings tr:nth-child(even) .wb-standings-col1 {
background: #f2f2f2
}
table.standings tr:nth-child(odd),
table.standings tr:nth-child(odd) .wb-standings-col1 {
background: #FFF
}
You can add another selector to the same CSS definition by using a comma to separate. That way you can still control both definitions by modifying a single CSS spec.
As to why this is happening.... I'm not really sure. I'm guessing it has something to do with the fact that the .wb-standings-col1 class is positioned absolutely and that messes with the rendering of the table underneath. I've noticed in Chrome's dev tools that that particular cell is set to display: block but the rest of the cells are set to display: table-cell. That may be another reason for it. Someone else will have to give you that answer :)
Alternating colours for first column
Just add
tbody tr:nth-child(odd) th {
background-color: red;
font-weight: 100;
}
tbody tr:nth-child(even) th {
background-color: #343434;
font-weight: 100;
}
this should fix it for you, i guess
CSS alternate row order for display:table
You can use the following CSS code. It uses display:flex on the li tags, with reverse order on every second one (:nth-child(even)) , and display: block on the two text spans to make them go across the whole width of their parent and therefore place them below each other. Other details see below:
(The width of the container can be adjusted as desired, it could as well be 100% to span the whole width of its parent)
img {
max-width: 50px;
height: auto;
}
ul {
list-style-type: none;
display: block;
width: 200px;
padding: 0;
}
ul>li {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
ul>li:nth-child(even) {
flex-direction: row-reverse;
}
.item-text > * {
display: block;
}
.item-pic,
.item-text {
padding: 10px;
}
.item-name {
font-weight: bold;
}<html>
<body>
<ul>
<li>
<span class="item-pic"><img src="green.gif"></span>
<span class="item-text">
<span class="item-name">Green</span>
<span class="item-details">This is a green item</span>
</span>
</li>
<li><span class="item-pic"><img src="red.gif"></span>
<span class="item-text">
<span class="item-name">Red</span>
<span class="item-details">This is a red item</span>
</span>
</li>
<li><span class="item-pic"><img src="blue.gif"></span>
<span class="item-text">
<span class="item-name">Blue</span>
<span class="item-details">This is a blue item</span>
</span>
</li>
<li><span class="item-pic"><img src="yellow.gif"></span>
<span class="item-text">
<span class="item-name">Yellow</span>
<span class="item-details">This is a yellow item</span>
</span>
</li>
</ul>
</body>
</html>Alternating CSS Grid columns and mobile view
For accessibility concerns and better SEO keep the markup in the logical order (title, image).
On mobile, you do not need a grid at all, use display:block for the container. Use grid-auto-flow: row dense to fill the grid as densely as possible following the row order. This ensure no grid cell will be empty.
Then alternate the title elements by specifying the column they need to start from. You can use the :nth-child() sibling selector to pick the titles, starting from the 3rd and then every 4 (4n - 1 means 4 * 0 - 1 = -1 (invalid sibling, skipping); 4 * 1 - 1 = 3; 4 * 2 - 1 = 7; ...).
/* display a stacked grid <767 pixels */
.services-area {
display: block;
}
/* display a 2-column grid >768 */
@media (min-width: 768px) {
.services-area {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: center;
grid-auto-flow: row dense;
}
}
.services-area > :nth-child(4n - 1) {
grid-column-start: 2;
}
.services-image {
max-width: 100%;
height: auto;
}
Alternate row colours from 2nd row of the table using CSS
You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>Related Topics
Submit Input Doesn't Get The: Active State in Ie8 When I Click on The Button's Text
Best Way to Add Background Image with CSS3 Filters
CSS Positioning Absolute Within Table Cells Not Working in Firefox
CSS Pseudo Element (Triangle Outside The Tr) Position Misaligned When Scrollbar Appears
@Font-Face with Embedded Font Does Not Work
To Change Text-Color in Mat-List-Option
CSS Floating Inline Elements (960 Gs)
How to Style: Root Without !Important Using Proper Specificity
How to Keep CSS Style for Only One Element
How to Expand a Cropped Image into a Box
Mime Type ('Text/HTML') Is Not a Supported Stylesheet
How to Create an Infinite Background Pattern Animation Using Linear-Gradient
Why Does Input's Size Increase in CSS Grid Layouts
How to Add Multiple Browser Specific Values into a CSS Style in React