Increase the width of the border-top for the <tr> element in CSS prior to the horizontal extension

I am looking to extend the border-top of each <tr> element within an HTML table by 1rem on both sides seamlessly.

body {
  padding: 4rem;
}

table {
  border-collapse: collapse;
}

tr {
  border-top: 1px solid #000;
}

tr:before {
  content: '';                   
  display: block;
  width: 2rem;  
  border-top: 1px solid black; 
}

tr:after {
  content: '';                   
  display: block;
  width: 2rem;  
  border-top: 1px solid black; 
}
td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
</table>

The border is displaying with a height of 2px rather than 1px. How can I adjust this so that the border seamlessly extends on both sides?

htmlcss

Answer №1

Avoid using border-collapse: collapse.

body {
  padding: 4rem;
}

table {
  border-spacing: 0;
}

td {
  border-top: 1px solid #000;
}

tr:before {
  content: '';                   
  display: block;
  width: 2rem;  
  border-top: 1px solid black; 
}

tr:after {
  content: '';                   
  display: block;
  width: 2rem;  
  border-top: 1px solid black; 
}
td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</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

What is the proper way to target a div element that has the class of "name1 name2"?

Currently, I am learning CSS through a tutorial and there is a div with the class: <div class="related products"> I am curious, how do I target this specific div in my stylesheet? ...

csscss-selectors

Validating registration form in JSP with JavaScript and <span> tag

Whenever I click submit without entering any text, it displays "*this field is empty"... which is expected behavior. However, when I input my first name and then hit submit, the result looks like in the image below: After entering the first name and click ...

javascripthtmlfunctionvalidationjsp

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

javascripthtmlseleniumuibuttonbuttonclick

Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem t ...

htmlcss

Decrease the amount of empty space when adjusting the window size

Struggling to make a section of my website responsive and encountering an issue that's proving difficult to solve. The current setup involves 3 rectangular inline-block divs per "row" with a margin-right of 100px in a wrapper, all dynamically added. ...

htmlcss

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! https://i.sstatic.net/V6Rdr.jpg <html> <head> ...

htmlcsshtml-email

Using JavaScript to cheat on a typing test by automating the typing of letters

I am currently working on a solution to simulate key presses for a typing test. My idea is to extract individual letters from the text, store them in an array, and then simulate pressing each key with a delay between each press. Below is the HTML layout o ...

javascripthtmljquerygoogle-chrome-devtools

issues with image tags using Angular

Having trouble loading a jpg logo in an angular app using the <img> tag in the HTML of header component. Interestingly, when clicking on the path in VS CODE it leads to the image, but on the browser, I encounter a 404 error. This is the code snippet ...

htmlangulardirectory-structure

Developing my React application with Material UI. The fonts I've implemented don't appear consistent on Mac operating systems

Why does the font change in Mac and iOS platforms, and how can I ensure consistency across all devices? Here is an excerpt from my index.css file: body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto&apos ...

cssreactjsfontsmaterial-ui

New line displaying pagination for Bootstrap datatable

I am currently utilizing the datatable feature with bootstrap version 4.3.1. The necessary CSS and JS files have been integrated as shown below: <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script ...

jqueryhtmlcssdatatablesbootstrap-4

Clicking on numerous hyperlinks using Selenium IDE

Looking to automate some websites using Selenium IDE? Here's how you can achieve this: Click Click Link 1 do some clicking inside that link go back to the list of links Click Link 2 do some clicking inside that link go back to the list of links Cli ...

htmlseleniumxpathselenium-ide

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

htmlcss

Personalized Bootstrap 4 navigation bar tailored specifically for the application process

Seeking a customized progress nav-bar for my application, with a design similar to this: https://i.sstatic.net/ahDBa.png Discovered it on this website. Despite using the provided HTML and CSS, I'm unable to make it work with Bootstrap 4. HTML < ...

htmlcssbootstrap-4navnav-pills

Using Javascript to refresh an image and update a class within a DIV when another DIV is clicked

I have a code that is quite lengthy to share here, so I've created a demo on JSFiddle: http://jsfiddle.net/Emily92/5b72k225/ This particular code takes a random image and divides it into multiple sections based on the class applied to the div contain ...

javascriptjqueryhtmlcssimage

Choose an image to display as the background image within a div

I'm developing an online poster creator and I could use some guidance on how to set an image as the background of a div element. I'm a bit lost on where to begin. Currently, I have a div containing a selection of images and an empty div with jus ...

javascriptjqueryhtmlcssjquery-ui

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

htmlcsstwitter-bootstrap

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

What are the steps to create a downpour in every location on Earth

Is there a way to create a continuous raining effect for my weather app using CSS only? I have achieved a satisfactory look, but the rain effects seem to only cover random chunks of the screen rather than the entire screen. How can I make it cover the enti ...

csscss-animations

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

Create a div in CSS that is square and relatively positioned

Is there a way to use CSS alone to ensure that a div with relative positioning remains perfectly square in all scenarios? I have a script that allows users to upload images, which are then applied as the background image. The challenge is that the system ...

htmlcss