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

"Implementing a Modular CSS Approach and Uniform Styling Across Your App

How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example: .h1 { font-size: 3rem; /* more styles */ } .h2 { ...

cssreactjscss-modulesreact-css-modules

Switching Styles in React applications

I am currently developing a React application and I have multiple stylesheets to restyle the same elements. For the purpose of this query, let's assume that I have two stylesheets with identical elements but different styles. Presently, in my app, I i ...

cssreactjs

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

htmlcss

Guide to Wrapping Inner or Wrapping All Elements Except for the Initial Div Class

I am looking to enclose all the elements below "name portlet-title" without including other elements within the "div class name portlet-title". I have attempted the following methods: 1) $("div.item").wrapAll('<div class="portlet-body"></div ...

javascriptjquerycsshtml

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

Assign a value to the input field based on changes made in another input field

I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...

javascripthtmldom-eventsonchange

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...

htmlcss

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

javascripthtmlcssxpathcss-selectors

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

javascripthtmlcss

Using a custom HTML file as a container in an Android WebView

I am trying to include each loaded page within my own custom HTML file. My app needs to first parse the loaded page, select the body tag, insert it into my custom HTML file, display it in a WebView, and continue this process for each subsequent page. I h ...

androidhtmlparsingwebview

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

csshtml

What is the significance of $() in jQuery?

I understand that $() is a selector, but I find it puzzling as to what it actually selects since there is nothing inside the parentheses. Is this a common practice or frowned upon in coding conventions? An example of where I have seen it used is when maki ...

javascriptjqueryhtmljquery-uidom

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

javascriptjquerycsstoggleclass

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

javascripthtmlcssdjangocodepen

Update the style dynamically in Angular using an ngFor directive and an array of data

Is there a way to dynamically set the width using data from an array in Angular? The usual approach doesn't seem to work. How can I solve this issue? <div *ngFor="let item of products"> <div [style.width.px]="item.size" class="Holiday"&g ...

htmlangulartypescriptarraylist

Make Jekyll process HTML files even without front matter by using the Knitr tool to add front matter to the HTML files

I am currently utilizing RMarkdown in combination with knitr to produce various HTML documents. After uploading these documents to GitHub, Jekyll is utilized for rendering the files onto GitHub pages. My objective is straightforward: I want the index.html ...

htmlr-markdownjekyllknitr

javascript tabs not functioning as expected in HTML

I am currently putting the finishing touches on a basic website for a project I'm involved in. The site features two tab controls - one on the right side of the page and the other on the left. Each control has 3 tabs that, when clicked, display differ ...

javascripthtmlajaxjquerytabs

What could be causing the video not to display in landscape mode on the iPad Pro?

I'm having an issue with a standard HTML5 <video> on my website. The videos are working fine on most devices, however there is a problem specifically with the iPad Pro in landscape orientation. It seems to work properly in portrait orientation ...

javascriptjqueryhtmlvideodevice-detection