Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust.

Here is the current look:

I am trying to have a square border around each date on the calendar. Each individual date squares should have a 1px border like the one around Taiwan Acrobats. Currently, I am getting the border around the images instead.

This is my current style rule:

table.calendar {
border: 1px solid black;
border-spacing: 5px;
font-size: 8px;
margin-top: 20px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
padding: 40px;
width: 650px;

background-image: url(topleft.jpg), url(topright.jpg), url(bottomleft.jpg), url(bottomright.jpg),
                    url(top.jpg), url(left.jpg), url(right.jpg), url(bottom.jpg);

background-position: left top, right top, left bottom, right bottom, left top, left top, right top, left bottom;

background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x;
}

And this is the table:

        <table class="calendar">
        <caption>Events in Feburary at the CCC</caption>

        <colgroup>
            <col class="weekdays" span="5" />
            <col class="weekends" span="2" />
        </colgroup>

        
        ...
        
        </tbody>
htmlcss

Answer №1

Let's get started! First things first, make sure each day is marked up with a <td> instead of a <th>. Reserve the use of <th> for the headings Monday through Sunday.

UPDATE - Check it out here: Interactive demo!

  1. Remove the background from the table
  2. Enclose the table within a div having the class calendar
  3. Add the background to the div and provide the div with padding equal to the height of the background image

HTML

<div class="calendar">
    <table>
        <!-- (Remove class from table) -->
        <!-- This is the contents of the table -->
    </table>
</div>

CSS

.calendar {
    background: #CCC; /* Insert your background image here */
    padding: 20px 0 0; /* same height as the background image */
}
.calendar table {
    border-collapse: collapse;
    background: #FFF; 
}
.calendar th, .calendar td {
    border: solid 1px #CCC;
}

Does this meet your requirements?

Answer №2

While there are already some great answers provided here, allow me to add my perspective as well.

My preferred method for achieving this effect involves using the following CSS code.

/* Apply border to top and right of the table */
table {border:solid black;border-width:1px 1px 0 0;}
/* Add border to bottom and left of each cell */
table th, table td {border:solid black;border-width:0 0 1px 1px;}

By implementing these styles, a neat border is created around each cell.

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

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...

javascripthtml

Focused on individual characters in a string to implement diverse CSS styles

Is there a way I can apply different CSS classes to specific indexes within a string? For example, consider this string: "Tip. \n Please search using a third character. \n Or use a wildcard." I know how to target the first line with CSS using : ...

javascriptcssreactjs

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure: <Paper> <List> .. </List> </Paper> One issue I am facing is that when the list is scrolled, the ...

cssreactjsmaterial-ui

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

csscss-animations

What is the process for adjusting positioning in bootstrap?

After spending countless hours attempting to create a responsive webpage using the bootstrap grid system, I have hit a dead end. Here is the code I have been working with: <div class="row"> <div class="col-md-2" align=&quo ...

csstwitter-bootstrapbootstrap-4

What is the best way to display a unique image in a div based on the size of the

Being new to web design, I have a question about creating a webpage with a large image in the center like on GitHub's Windows page. How can I work with the image inside that particular div or area based on different screen sizes? Is it possible to mak ...

javascripthtmlcssimagejquery-plugins

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

javascriptphphtmlcss

Locate an element by its TEXT using SeleniumBase

When using SeleniumBase, I have a requirement to click on an element that is identified as shown below: <span class="text"> Contato PF e PJ </span> The specific text inside the element (Contato PF e PJ) needs to be ...

htmlseleniumseleniumbase

Troubleshooting a JavaScript error: Script.js throwing 'Uncaught TypeError' at line 5

While working on a small project, I encountered a JavaScript error that reads: script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') at script.js:5:18 Below is the HTML & JavaScript code snippet that triggered thi ...

javascripthtmlcss

Modifying a Field's Value by Referring to a Different Field

I am working on developing a form that includes a dropdown menu for changing the aircraft type. Additionally, I want to incorporate another field named "Registrations" which will automatically update the available registration options based on the selected ...

javascriptphphtmlforms

Issue with $_SERVER['PHP_SELF'] not functioning properly

Apologies if this question has been asked before, but after searching extensively I couldn't find a solution. Therefore, I am posting here... The issue is that I'm trying to submit values on the same page (using jQuery Mobile UI) and I have used ...

phphtmlformsjquery-mobile

scrollable list using bootstrap

<div class="panel panel-primary" id="result_panel"> <div class="panel-heading"><h3 class="panel-title">List of Results</h3> </div> <div class="panel-body"> <ul class="list-group"> &l ...

csstwitter-bootstrap

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

htmlascii-art

What is the best way to split text copied from a textarea into <p> paragraphs with an equal number of characters in each?

Check out this JSFiddle version I've found a JSFiddle example that seems perfect for my current project needs. However, I'm wondering how to modify the code to ensure that each paragraph is evenly divided with the same number of characters and a ...

javascriptjqueryhtmlcssparagraph

The best method for quickly loading a webpage that is over 20MB in size

My website is a single-page calendar featuring a full year's worth of images. With 344 requests and a total load size of 20MB, the page consists of a simple PHP script without a database. The requests include a CSS file (15KB), 4 JS files (20KB), two ...

javascriptphpjqueryhtmlimage

How to automatically select the first item in a populated dropdown list using Vue JS

My HTML select element is populated with options from a server, but when using v-model, it initially selects an empty option instead of the first one. I came across a solution on a post which suggests selecting the first option manually, but since the dat ...

javascripthtmlvue.jsvuejs2

Column content merging in BS layout

Currently, I am exploring how to implement a two-column layout with the left column serving as a scrollable navbar. At this early stage of development, please excuse any imperfections in the code! One issue that arose involved using the .sidebar class wit ...

csshtmlbootstrap-4