I recently set up a table with 12 rows and 2 columns, containing various contents. I am looking to add borders to the table, but with a unique twist - after every set of 4 rows, I want to make the horizontal border thicker than usual. Does anyone know how to achieve this effect? Your assistance would be greatly appreciated.
Give this selector a try
table tr:nth-of-type(4n) td {
border-bottom: 3px solid #f00;
}
Explanation : This selector targets every fourth row within a table by first selecting the table element and using the :nth-of-type(4n) pseudo-class. It then applies styles to the td element in that specific row. You can customize the borders with properties like border-bottom, border-top, or simply use border for all sides of the td element.
See Demo 2 (CSS Normalized)
This method allows you to avoid adding extra classes to your elements.
If needed, here is the HTML code:
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
</table>
Note: The provided selector will target all tables on your website. To apply styles to a specific table, consider assigning a class to it and use a more specific selector, as shown below:
table.class_name tr:nth-of-type(4n) td {
/* Styles */
}
To style every fourth row of a table using CSS, use the nth-child selector:
#your-table .table-row:nth-child(4n) {
border-bottom-width: 4px;
}
Could someone please help me with embedding a Facebook video? I tried following the instructions provided at: https://developers.facebook.com/docs/plugins/embedded-video-player Unfortunately, I'm having trouble getting it to work. Here is the sourc ...
My explanation of the title might have been unclear. I have a simple chat application where users can send text, audio, video, or images. To render these messages, I have a method that checks the message type and renders it accordingly. If the message is t ...
Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the ...
Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...
I'm facing an issue with a table I'm using for a shopping basket on my website. Everything seems to be working fine until I added a tfoot element, causing the tbody to not span 100% of the container's width. I've been troubleshooting a ...
Trying to extract information from by scraping the data. The goal is to automate the process of changing the date range through a script. However, encountering difficulty in selecting the date range picker using the XPATH provided below. //*[@id="bod ...
Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...
Having issues with a CSS slideshow code that should move left and right on hover. After placing images into the slideshow, nothing appears. A working version can be seen at the bottom left corner of this page. I am unable to replicate the functionality and ...
The instructions on this website suggest that the width of the side-nav can be changed using CSS like so: md-sidenav { width: 200px; } This leads me to wonder, can I apply standard CSS properties such as width, position, etc... to custom components wi ...
My code is based on Bootstrap v4 and I am facing an issue with creating gradient backgrounds for primary buttons that also use outline. The challenge is to maintain the same height and width for both buttons without the 2px border on the primary buttons. G ...
I have a straightforward element There are two variations of it - one using styled-components and the other without: No Styled Components <div id="box"> <div id="inner-box"></div> </div> #box { width: 100px; height: ...
I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page. Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar le ...
Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...
Looking to develop an interactive pie chart using JavaScript, I delved into some research and stumbled upon the Google Charts API. However, my primary apprehension lies in the fact that the data is transmitted to Google's server for generating the ch ...
I am trying to use JavaScript to update directory links. For example, I need to switch to . This is the code I currently have: <!DOCTYPE html> <html> <body> <img src="http://mysite.com/cdn/backup/Pic.jpg" /> <iframe src="http ...
I'm attempting to align elements to the right within a container and hide any overflowed elements while still allowing them to be accessed via a scrollbar. However, I've noticed that the scrollbar disappears when using justify-content: flex-end. ...
When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...
Check out the JsFiddle demo here I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example. The source code within the aforementioned link contains specific CSS styles: .ui-tabs-vertical { width: 55em; } ...
I need assistance with extracting a selected value (player) from a dropdown menu. The goal is to send this 'player' value to Flask upon selection, and then render the corresponding player's image on the website. HTML: <form method="P ...
I have encountered an issue with the code below. In my project, I have a search bar along with some buttons. Currently, only the hyperlink of the search button is functioning correctly. The other buttons seem to redirect to the same link as the search bu ...