The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table?

This peculiar phenomenon seems to occur only in the first row:

https://i.stack.imgur.com/qMWCh.jpg

In all other rows, the border aligns properly with the margin area as expected:

https://i.stack.imgur.com/9wQ6x.jpg

The dark border visible in the images is the table container and the table's margin-left is set at 0px. The collapse border model is being used.

body{
  margin-left:50px;
  border:2px solid grey;
}
table{
  border-collapse:collapse;
  margin-left:0px;
}
.cellborder{
  border-left:20px solid orange;
}
td{
  background-color:gainsboro;
}
<table>
  <tr>
    <td class="cellborder">data1</td>
  </tr>
  <tr>
    <td class="">data2</td>
  </tr>
  <tr>
    <td>data3</td>
  </tr>
</table>

Answer №1

One possible reason for this issue is that the <table> element uses the first row as a reference point for organizing widths and other styles for subsequent rows. To resolve this, you can add an empty <tr> tag at the beginning:

body {
  margin-left: 50px;
  border: 2px solid grey;
}
table {
  border-collapse: collapse;
  margin-left: 0px;
}
.cellborder {
  border-left: 20px solid orange;
}
td {
  background-color: gainsboro;
}
<table>
  <tr></tr>
  <tr>
    <td class="cellborder">data1</td>
  </tr>
  <tr>
    <td class="">data2</td>
  </tr>
  <tr>
    <td>data3</td>
  </tr>
</table>

Preview:

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

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

Stop the infiltration of emotions into your style

Utilizing the JsonForms React Component to dynamically generate an HTML form in my web application. The framework I am using handles all view rendering on the server side. To integrate this component, I compiled a small react component by running npm run b ...

Struggling to figure out the method for obtaining css selectors for scraping in scrapy

Struggling with scraping a website and figuring out how css selectors work in Scrapy. The css in question: https://ibb.co/eJeZpb Here are some standard css selectors: .css-truncate-target .message .js-navigation-open time-ago For scrapy, you would need ...

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...

The span exits the external div only once the animation has concluded

I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

Using jQuery to modify CSS attributes is proving to be more challenging than I anticipated

I am attempting to modify a CSS attribute using jQuery. I have used the following code: wrapperInner.css('overflow', 'visible'); However, the value remains unchanged. When I use an alert alert(wrapperInner.css('overflow')), ...

Extending an element beyond the boundaries of its container

I currently have 3 different divisions within the body of my document: a container, a parent, and a child element. My goal is to make the child element extend beyond its parent on the left side. However, when I try to achieve this by using position: ab ...

"Utilizing AngulaJS to apply a class to the parent element when a radio button is

I'm wondering how I can assign a class to the parent div of each radio button in a group? You can find the code below and view the corresponding JSFiddle here. Here is the HTML: <div class="bd"> <input type="radio" ng-model="value" val ...

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

Styling with CSS Variables and Transforming Elements

After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?" Within the HTML header, three CSS variables and their fallback values are declared: ...

The background extends beyond the confines of its container

I'm facing some challenges trying to create this specific layout, particularly with setting a background that should cover 50% of the screen size. My initial thought was to use an image as the background, but I need different colors for each page. ht ...

Ever since implementing a new section class, the CSS first-of-type selector has ceased to function

After referencing a previous response, I utilized first-of-type to specifically target the initial menuSection with this code snippet... .menuSection:first-of-type { background: red; } <div id="container"> <section class="menuSection"> ...