Specific height of a table row <tr>

I'm having difficulty setting a PRECISE height on an html table row.

https://i.sstatic.net/5mP39.png

The left column consists of two divs, each with a height of 44px, while the right column contains the table. The height of each row is set to 44px, but when inspected in Google Chrome, the rows are displayed as 44.44px in height.

SASS:

table {
  width: 100%;
  border: none;
  tr {
    height: 44px;
    cursor: pointer;
    td {
      padding: 0 16px;
      border-bottom: 1px solid $bg-light;
      vertical-align: middle;
    }
  }
}

I am also using Eric Meyers css-reset, but the issue persists regardless.

Any idea where the extra .44px might be coming from?

EDIT

This problem appears to be specific to Google Chrome; Safari displays the correct height.

htmlcsssass

Answer №1

Looks like a similar issue to Removing gap between tbody elements

The problem here seems to be related to border-collapse and border-spacing in your table alongside the div. Tables tend to have extra space by default. Make sure to set your td's and divs to display as inline-block, block, or flex to properly align the items in the center.

Check out this code snippet below along with a helpful link on how to fix it:

table {
   border-spacing: 0;
   border-collapse: collapse;
}

https://codepen.io/calebswank11/pen/rJvBWK

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

Safari experiencing a CSS issue not found in Chrome or Firefox

https://gist.github.com/2354116 When you check the link above in Chrome or Firefox, everything looks good. The divs at the bottom, including the headings and social icons, are centered within a container div without any issues. However, when viewed in Sa ...

csshtmltwitter-bootstrap

allowing users to scale content and adjust layouts based on device characteristics

When I inherited the maintenance of a website, I discovered that it was not optimized for mobile devices. The client requested that the site be made accessible on mobile devices, so I attempted to ensure that the mobile version mirrored the desktop version ...

cssresponsive-designmedia-queriesviewport

The jQuery .html() function seems to only be functioning properly on the initial element

I'm currently collaborating with a partner on a project using WordPress and PHP for an assignment. We've made progress, but I’m encountering a particular issue. My problem arises when utilizing the .html() function in Ajax—only the first tab ...

phpjqueryhtmlmysqlajax

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

htmlcssbordermarginpadding

Hello there! Could you please provide some guidance on how to insert a photo onto a website using Django?

How can I implement a feature that allows users to choose a photo for a product from within the system or enter a URL to use as the image? The selected image should be displayed in the product list along with other relevant information. I have written the ...

htmldjangoimageformsdjango-models

The method of document.getElementsByName does not provide any results

I am a beginner in using python flask and understanding the MVC concept. My goal is to display the selected option in a dropdown list. Below is my list defined in a .py function. @app.route('/', methods=['GET']) def dropdown2(): ...

htmlflaskmodel-view-controller

Issue with BeautifulSoup(page.content,'html.parser') not returning accurate content during web scraping

While attempting to scrape data from the AJIO website, I encountered an issue where the content retrieved by Python did not match what I saw when inspecting the exact webpage. It appears that there is some JavaScript code present on the page which dynamica ...

pythonhtmlweb-scraping

AngularJS: How can I eliminate the #! from a URL?

Looking for guidance on how to remove #! from the URL in AngularJS using ng-route. Can anyone provide a step-by-step process on removing #!? Below is the code snippet: index.html <head> <script src="https://ajax.googleapis.com/ajax/libs/ang ...

htmlangularjs

Avoiding the repetition of CSS animations during Gatsby page hydration

I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening? Below is my styled components code ...

javascriptcssgatsbystyled-components

What is the best way to place a slider side by side with forms while utilizing Bootstrap?

I am looking to display a sample app screen inline with a form on my website. I have attempted to use the following code in the slider's CSS: display: inline-block; overflow: hidden; white-space: no-wrap; Unfortunately, this has not been successful ...

htmlcssbootstrap-4

Transforming jQuery code to pure vanilla Javascript

For my project, I decided to convert my jQuery code into native JavaScript. The goal is to eliminate the dependency on jQuery and achieve the same functionality. The current setup involves two pages - page.html and side.html. The page.html document fetches ...

javascriptjqueryhtml

Changing the color of a div's text based on its content with CSS

I am facing a challenge in styling the text inside a “div” element using a Javascript function. Initially, when the page loads, these “divs” contain no value. The values of the "divs" will change between "Open" and "Closed" twice a day when the Jav ...

javascripthtmlcss

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

jqueryhtmlcssjquery-selectors

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

htmlcssangularflexbox

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

javascripthtmlangularjsweb

When the mouse hovers over DIV2, the background image of DIV1 will be replaced

I have a full-screen background div with the ID #background-change. Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc. My goal is to change the background image of #background-change when the mouseove ...

javascriptcssbackground-image

Ng-Zorro nz-range-picker resizing issue on smaller mobile screens

Currently using ng-zorro-antd 7.0.0 rc3 alongside angular 7.2.4. Encountering an issue where horizontal scrolling is not possible on mobile browsers when using the nz-range-picker. It appears that the element is too large for the screen, even though the p ...

javascriptcsstypescriptangular7ng-zorro-antd

The span's presence causes the neighboring span to shift downwards

HTML <span class="symbol">$</span> <span class="value">400</span> This code snippet displays the symbols "$" and "400" at the same level in the document. However, if we introduce some styling using CSS: .symbol { font-size: 2e ...

htmlcss

Quickly Alter Background Image when Hovered Over

I am looking to enhance my website by having the background image change on mouseover of an object, with the replacement image only showing for a quick moment before returning to the original. Additionally, I want to incorporate a short sound file into the ...

javascriptjquerycssbackground-imagemouseover

Is it possible to assign numerical values to attributes in HTML code?

I'm unsure about something - is it possible to set an attribute value as a number? For example: <div data-check="1"></div> Is this the correct way to do it or not? I've heard conflicting opinions, with some people saying you shouldn ...

javascripthtml