What causes an increase in td width when using CSS background-color?

Here is an example of HTML structure:

<table class="barby-barcode">
  <tbody>
    <tr class="barby-row">
      <td class="barby-cell on"></td>
      <td class="barby-cell on"></td>
      <td class="barby-cell on"></td>
    </tr>
  </tbody>
</table>

This is the corresponding CSS:

table.barby-barcode { border-spacing: 0; }
tr.barby-row { height: 100px; }
td.barby-cell { width: 3px; height: 3px; }
td.barby-cell.on { background: #000; }

However, for some reason, the actual display shows td.barby-cell.on with a width of 5px. Why is the width increasing?

htmlcss

Answer №1

Initially, the use of "table", "tr" and similar elements is redundant. Simply using ".barby-[sth]" to define the class is sufficient.

Furthermore, it is essential to verify that the margin, padding, and border are all set to 0.

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

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

Using CSS Grid to dynamically size based on content inside a div element

We are in the process of adding tags to our website, and we want them to be dynamically generated from our CMS. Currently, all the tags render on the page and we can use them, but we would like the divs to adjust their width automatically based on the leng ...

csscss-gridstyled-components

The calendar on the Datetimepicker is not appearing in the proper position

I have encountered an issue while using Eonasdan bootstrap datetimepicker in a paramquery grid. Whenever I open the datetimepicker, the calendar appears hidden inside the grid. To tackle this problem, I added the following CSS condition: .dr ...

jqueryhtmlcsstwitter-bootstrapcalendar

Issue with CSS3 gradient display in Firefox and IE, functioning correctly only in Chrome

I recently developed a text gradient class that looks great in Google Chrome but unfortunately doesn't display correctly in Firefox and Internet Explorer. In these browsers, there is a visible background gradient behind the text which is not the desir ...

cssgradient

The way browsers handle CSS styling when multiple elements have the same ID

I've been thinking about how IDs are supposed to be unique in HTML documents, but often times that rule is not followed. I'm curious to know how browsers handle CSS applications when multiple elements share the same id. From my initial testing, ...

htmlcss

Web applications that utilize subtle data formats

Is it possible to format input data in HTML5, JavaScript, PHP and MySQL without changing the actual value? For instance, if we have <input value='10000.5'> The actual value is visible when looking at the html code, but on the website int ...

htmlweb-applications

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss

Conceal the HTML input element until the JavaScript has finished loading

Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...

javascripthtmlcssfile-io

The issue lies in the fact that the customization of the Ant Design theme is not being properly implemented

I'm in the process of customizing the antd theme in conjunction with next.js. After researching online, I came across a helpful example and implemented the setup like so: // package.json "dependencies": { "@ant-design/icons&quo ...

cssreactjsnext.jsantdstyled-components

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

Images in Angular Firebase causing scroll problems in Chrome

In regard to Angular 6, a common issue arises with slow image loading specifically in Chrome, not other browsers. The project utilizes Firebase and the snapshotchange method to fetch images for the Angular project. Image URLs used are like this: . The iss ...

htmlangulartypescriptfirebasegoogle-chrome

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Save web pages and images using Puppeteer

I'm currently working on saving a webpage for offline use using Nodejs and puppeteer. While many examples show using: await page.screenshot({path: 'example.png'}); This method doesn't work well for larger webpages. A more effective ap ...

javascriptnode.jshtmlweb-scrapingpuppeteer

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

javascripthtmljqueryajax

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

Alignment issue with Ul dropdown menus and shadow

After stumbling upon a fascinating menu design at this link, I decided to tweak it for center alignment by following the advice on this forum thread. Unfortunately, my efforts have hit a roadblock - the drop down menus aren't aligning as intended and ...

javascriptjqueryhtmlcss

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

I am currently in the process of developing an Android game using HTML5 and Javascript. I have managed to make some progress, but I have encountered a problem that has left me puzzled. Initially, my JS file and Html file were functioning well together for ...

javascriptandroidhtmlhtml5-canvas

Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...

javascriptjquerycss

Learn how to quickly resolve the issue in nodejs where the new image automatically replaces the old one when added

I have successfully created a file to upload images, however the image name appears as undefined.jpg in this project. I am using the Express file upload middleware. *admin.js var express = require("express"); const productHelpers = require("../helpers/pr ...

javascripthtmlcssnode.jsmongodb

Routing through routers and closing modals

Within my Angular project, I am using a form component across two separate components. What I want is for the onSubmit function to close a modal if the user selects 'Save' in one component, and to navigate using the router link if it's in th ...

htmlangulartypescript