Tips on applying a border to an HTML tr

Imagine I have created a table like this:

1    Chailie     23  Joker   Bass
2    Chailie     23  Joker   Bass
3    Chailie     23  Joker   Bass
4    Chailie     23  Joker   Bass
5    Chailie     23  Joker   Bass
6    Chailie     23  Joker   Bass

Now I want to format it to appear like this:

|----------------------------------------|
|1   Chailie     23  Joker   Bass        |
|2   Chailie     23  Joker   Bass        |
|3   Chailie     23  Joker   Bass        |
|----------------------------------------|
|4   Chailie     23  Joker   Bass        |
|5   Chailie     23  Joker   Bass        |
|6   Chailie     23  Joker   Bass        |
|----------------------------------------|

As you can see, I would like to add a border to a section of rows to group them together. Does anyone know how to achieve this? For example, is it possible to apply specific CSS to create such borders?

htmlcss

Answer №1

Explore the :nth-child CSS property for different styling options

tr:nth-child(3n+0) {
  background-color: lime;
}
tr:nth-child(3n+0) td {
  border-top :1px dashed blue;
}

View the working DEMO here

Updated version: Take a look at the revised code based on feedback

tr:nth-child(3n+1) td {
  border-top : 1px dashed blue;
}
td:first-child  {
  border-left : 1px dashed blue;
}
td:last-child  {
  border-right : 1px dashed blue;
}

Check out the latest DEMO

Another approach: Explore a cross-browser compatible alternative

tr:nth-child(3n+1) td {
  border-top : 1px solid grey; 
}
table {
    border-right:1px solid grey; 
    border-left: 1px solid grey; 
}

See the alternative method DEMO here

Answer №2

Check out the DEMO

CSS Styles:

table{
  border-collapse: collapse;
  border: 1px solid #000;
}

.three{
    border-bottom: 1px dashed #000;
}

HTML Code Example:

<table>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr class="three">
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr class="three">
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the height of a different element using only CSS, Stylus, or Nib

Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...

htmlcssstylesheetstylus

Looking to spice up your jQuery modal dialog with unique and varied styles?

Can anyone explain why the grid displayed in our jQuery modal dialog (jqGrid) appears with different styles, specifically font size, compared to the grid on our main screen? I would appreciate any insights or suggestions. ...

jquerycssjqgrid

Retrieving the CSS property values for a specific element using Selenium

Imagine a scenario where I locate an element by its XPath using: WebElement element = driver.findElement(By.xpath("specific XPath")); While I can retrieve the value of a single CSS property with element.getCssValue("specific property"), is there a way to ...

javascriptjavacssseleniumxpath

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

javascripthtmlcssfonts

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Recently, I was informed that there is a possibility of working on a project involving ASP.NET 3.5 and C#. A colleague suggested that when we publish the site, we should convert all pages to HTML. This means instead of www.test.com/Page.aspx, it would be w ...

c#asp.nethtmlsecurity

Resposiveness of force-directed graph is lost

const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...

javascriptcssd3.jssvg

Animating a Bootstrap 4 card to the center of the screen

I am attempting to achieve the following effect: Display a grid of bootstrap 4 cards Upon clicking a button within a card, animate it by rotating 180 degrees, adjusting its height/width from 400px - 350px to the entire screen, and positioning it at the c ...

javascriptjqueryhtmlcssbootstrap-4

Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strang ...

htmlcss

Learn the process of uploading multiple xml files in PHP

I am trying to figure out how to read multiple XML files with different names. For example, I have three XML files in the folder (/data/data/www/) named Message.xml, example.xml, and data.xml. Currently, I am only able to read one file. How can I modify my ...

phphtmlxmlfile

Tips for parsing information from a text file and displaying it on a website in table format

Would like to create a 2x4 table where the first column has a dropdown for selection. Upon choosing an option, the associated data will populate the other 3 columns. I'm new to this, so please bear with me. Using x, y, z as placeholders, the data wil ...

javascripthtmlcssdropdown

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

I'm trying to create a trapezoid button using CSS. Here is the intended look: https://i.sstatic.net/0vqlk.png However, my current implementation looks like this: https://i.sstatic.net/QrR4t.png The button appears fine but there seems to be some e ...

cssvue.jsuser-interfacesass

Is it possible for CSS3 transitions to handle multiple tasks simultaneously? Let's experiment with Fiddle and find out

I am attempting to create a simple effect: The div contains an image and text with a background of RGBA(255,255,255,0.5). Upon hovering over the element, I want the image to decrease opacity and the background behind the text to disappear in a seamless t ...

css

The sticky navigation bar isn't functioning properly, even though the code worked perfectly on W3School

I recently encountered an issue while trying to create a sticky navbar that would remain fixed after scrolling past a certain point. I found and customized some code from w3schools that included an animation effect, and it worked perfectly in their demo. H ...

javascripthtmlcss

Revamped Web Presentation: The Dynamic Blend

I'm struggling to arrange a section in the same way as shown in this image. https://i.stack.imgur.com/QVDHn.png I have been using bootstrap 4 and have experimented with rows and columns, but haven't been able to achieve the desired layout. Curr ...

htmltwitter-bootstrapbootstrap-4layouthtml-lists

Having trouble bringing in SVG file into my React project

I am currently using React version 15.4.1 and I have tried implementing a solution from this link. However, instead of the component being rendered, I only see a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg This is how ...

htmlreactjssvgecmascript-6loader

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

javascriptcssvue.jsflexboxvuetify.js

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

jqueryhtmlcss

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

javascripthtmlcssreactjs

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing