When the background image is concealed, the table will have no border

Is there a way to retain the borders inside the table even when the background images are hidden? I am using JS and jQuery to add the picture when the site is loaded.

Below is a snippet of my HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table border="1px" id="container" >
  <tr>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
  </tr>
  <tr>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
  </tr>
  <tr>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
  </tr>
  <tr>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
    <td class="a"></td>
  </tr>

 </table>
 </body>
 </html>

 .a{
 height:200px;
 width:200px;
  }

 .pic{
 background-image:url(pic.jpg);
 background-size:195px 195px;
 background-repeat:no-repeat;
 visibiility:hidden;
 }

Answer №1

When applying the .image class to the cell element, consider setting the style to background: Transparent rather than using visibility: hidden.

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

passing data from the view to the controller

When I choose an option from the dropdown menu, the selected value is not being passed to the controller action method. Although the selected value is binding in Ajax, it is not binding in the controller action method. Check out our page <div class="ro ...

Tips for finding matching text data between two HTML documents in C

Seeking assistance with a C programming interview problem that involves comparing text in two HTML formatted strings. Below are the examples of the two strings: <html><p>Hello</p></html> <html><p><b>H</b> ...

Retrieve the ID of a table row and then modify a particular element in an array associated with that ID upon clicking

Within my table, each TR is assigned a unique ID consisting of a letter followed by a numeric value. For example: <tr id="a0"> <td>Content #1</td> <td><div id="cs"></div></td> </tr> <tr id="a1"> ...

Issue with CSS/JS resolved: figured out a way to create a page/menu that overlaps with their individual scrollbars

I am encountering an issue with a scrollbar that is related to a fullscreen menu appearing on a page and causing the page scrollbar to reset due to a display: none property. The images below provide a visual representation of the problem: Below is the Ty ...

The button adjacent to my input consistently appears beneath the input field

I am currently working on a blog that consists of entries. I have included a form with hidden variables to delete posts by submitting the entry ID and other data. However, I am facing an issue where the delete button always displays below the entry instead ...

Perform subtraction operation between two arrays of objects in Javascript

Hey there, I could use some guidance on the best method for subtracting values between two arrays of objects. In my scenario (backend), I retrieve data on Products from mongodb, and I also fetch Trolley data from MySql. What I'm attempting to achieve ...

Initiate a unidirectional ajax request

My WCF service has a slow processing time when called for the first time, but caches the results in HttpRuntime.Cache afterwards. To initialize this cache, I want to initiate a fire-and-forget ajax call from JavaScript. Currently, my page contains the fol ...

Looking to send JSON data by using jQuery.ajax

I am having trouble with sending a JSON in the Ajax request using the POST method. The format of the JSON is as follows: { “gbus”: [ { "code": "*" } ], “regions”: [ { "code": "*" ...

Transform the array by utilizing its own elements

I came up with a solution to a problem I was facing, but I'm not entirely comfortable with it. It feels risky to me, like using an array to redefine itself is not a good coding practice. It's similar to trying to explain a word by using the word ...

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

Searching for the closest jQuery value associated with a label input

As a beginner in JQuery, I am looking to locate an inputted value within multiple labels by using a Find button. Below is the HTML snippet. Check out the screenshot here. The JQuery code I've attempted doesn't seem to give me the desired output, ...

The specified element type is not valid: only a string (for built-in components) or a class/function is expected when attempting to display a component

`Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you mi ...

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

JavaScript offers a variety of options for creating a link-styled button

Is there a distinction between <a href="javascript:;"></a> and <a href="javascript:void(0);"></a> ? I am looking to create a link-styled button that triggers a JavaScript function when clicked, so I implement the following: ...

Unable to process form submission using Ajax in ASP.NET MVC

I'm having trouble with submitting a form using ajax and opening a modal dialog after the ajax function is successful. Whenever I click the submit button, the process doesn't complete. Where could the issue be, in the ajax method or somewhere el ...

What is the best way to align the centers of these text pieces vertically next to a toggle switch?

Query: I'm feeling a bit out of practice with CSS, so this might be an easy question. This is the current look of the relevant section on my page. https://i.sstatic.net/Y0hj9.png To make it easier to analyze, I've extracted the code into a JS ...

Why is my Bootstrap 4 NavBar displaying a mysterious blank space on the right?

Kindly look at the image provided. The issue of white space only appears on the full-screen webpage, not on mobile or tablet views. /**** Nav Bar elements**/ .navbar{ z-index: 1; width: 100%; margin: 0; } .navbar-default{ background-col ...

Issue with :hover pseudo-class in IE8

If you're unsure about my explanation, check out the video for a visual demonstration. Pay close attention to the cursor movements while I attempt to optimize my website for IE8. Hopefully there is a solution to this issue. Thank you in advance! http ...

Guide to seamlessly navigating to an element using a hash in NuxtJS

My aim is to create a smooth scrolling anchor link menu using Nuxt.js, where the user can click on a link and be directed to the corresponding page section. However, I'm facing a dilemma as there are multiple approaches to achieve this functionality, ...

When attempting to use JSON.parse, it returns an undefined value

When using PHP to create JSON data and retrieving it through AJAX, why does JSON.parse return an "undefined" object? PHP CODE $emparray = array(); while($row =mysqli_fetch_assoc($result)) { $emparray[] = $row; } echo json_encode($emparray); AJ ...