What is the best method to create a transparent first row and all columns using css?

Is there a way to implement this design using HTML and CSS? https://i.sstatic.net/RjD6l.jpg

Keep in mind that the first row and columns in the first row should be transparent.

Answer №1

table {
    border-collapse: collapse;
}

th {
    height: 6rem;
    width: 6rem;
    text-align: left;
}

.background {
    background-color: lightgrey;
}

tr {
    height: 6rem;
    width: 6rem;
}

td {
    border: 1px solid lightgrey;
    border-collapse: collapse;
}
<table>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
      <tr class="background">
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</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

Fixing CreateJS in Adobe Animate HTML5 Advertisement for Internet Explorer versions 9 and 10

As I work on creating an HTML5 ad using Adobe Animate CC, I encounter a minor setback. While testing the ad, I notice that it displays perfectly in most browsers except for Internet Explorer versions 9 and 10. It's interesting to see that according ...

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

Click on the form to initiate when the action is set to "javascript:void(0)"

I am working on an HTML step form that needs to be submitted after passing validation and ensuring all fields are filled. The form currently has an action controller called register.php, but also includes action="javascript:void(0);" in the HTML form. What ...

Can the navbar brand be centered in Bootstrap 4 while also aligning some text to the left of the brand?

Just dipping my toes into website coding and Bootstrap is a whole new territory for me. I'm struggling with centering the brand in the navbar while keeping the text aligned to the left of it. So far, every attempt results in both elements being center ...

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...

Dynamic Font Formatting in Rails Table Based on Conditions

I need to customize the font color of dynamic values based on the state_id. If incident.state_id = 1, the font should be red; if incident.state_id = 2, it should be yellow; and if incident.state_id = 3, it should be green. incident.state_id = 1 : state.na ...

What is the best way to align an image with the background of a div element?

Currently, I am attempting to create a page header that includes an image. To achieve this, I am using a div: <div id = "header"> </div> To set the background image of the div, I have added the following CSS: #header{ background-image: u ...

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

Is it feasible to programmatically click a div button in C# using WebBrowser?

Exploring the capabilities of WebBrowser in C#, I came across a website that features a button without an ID, but rather nested within a div element. <div class="pc-image-info-box-button-btn-text pc-cursor"><i class="fa fa-heart" aria-hidden="tru ...

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

Upon browsing the Mozilla homepage, I noticed a peculiar element in the center - a <select> option with an arrow lacking border and background color. In contrast, when visiting the Facebook sign-up page, the drop-down arrow adheres to the Windows sta ...

To prevent the page focus from shifting, make sure to force click on a blank link

My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...

CORS policy is preventing access to the XAMPP Server:

For the past 10 hours, starting at 10 am, I have been struggling with a persistent issue that I just can't seem to fix. Despite my continuous efforts, the problem remains unsolved. Problem Image / https://i.hizliresim.com/AtfbH9.png The methods I&apos ...

A two-column layout utilizing the full height feature in Bootstrap 5, excluding the use of cards within the

I am currently attempting to create a two-column full-height page without using cards. Instead, I want to include a significant amount of text, links, and buttons in both columns. I am uncertain if this is achievable with Bootstrap columns. If anyone knows ...

Struggling to display the array after adding a new item with the push method

Seeking assistance in JavaScript as a newcomer. I have written some code to print an array once a new item is added, but unfortunately, it's not displaying the array. I am puzzled as there are no errors showing up in the console either. In my code, I ...

What is the best method for accessing data values from HTML within a JavaScript function?

Greetings, I am relatively new to using jquery and ajax. Here is a snippet of my code: .html <li class="list-group-item"> <h2>Vocabulary</h2> <h4> <span class="label label-success">Like Name</span& ...

Adjust the arc angle on the canvas

I am currently working on creating a Semi Arc using Canvas. My question is regarding changing the overall angle of the arc to match the expected image. Expected Image Below is the HTML code for the Semi arc: <canvas id="myCanvas" width="578" height=" ...