Tips for customization: Altering HTML table borders and column widths

I am looking to update the appearance of an HTML table. Currently, it looks like this: https://i.sstatic.net/pueyW.png

Here is the code snippet:

<div className="student-schedule">
      <table className="student-calendar-table">
        [...]
</table>

And here is the associated CSS:

.student-th{
  color: rgb(71, 71, 71);
}
[...]
.student-block {
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  color: rgb(71, 71, 71);
}

[...] all that findCss function does is handle the colors. I have been struggling with two main issues:

  1. Ensuring uniform width for each column regardless of content.
  2. Creating space between each day column without cutting off left borders.

If you can help me achieve the desired layout shown in the screenshot below, I would greatly appreciate it: https://i.sstatic.net/NuAkd.png

[...]

Answer №1

This task has proven to be quite difficult, and unfortunately, I have not succeeded in finding an effective solution. My attempt involved utilizing the width and min-width properties to achieve a balance between the columns. Additionally, I employed a pseudo element to create a border where a wider gap was desired.

.student-th{
  color: rgb(71, 71, 71);
  width:calc(100% / 7);
  max-width:calc(100% / 7);
  min-width:calc(100% / 7);
  border-right: 3px solid #dedbd9; 
  border-left: 3px solid #dedbd9; 
  border-top: 1px solid #dedbd9; 
  border-bottom: 1px solid #dedbd9;
}
.student-td {
  border-radius: 10px;
  border-right: 3px solid #dedbd9; 
  border-left: 3px solid #dedbd9; 
  border-top: 1px solid #dedbd9; 
  border-bottom: 1px solid #dedbd9;
  color: rgb(71, 71, 71);
  box-sizing:content-box;
  background-color: rgb(200, 200, 71);
  width:calc(100% / 43);
  min-width:calc(100% / 43);
  overflow-wrap: anywhere;
}

.student-calendar-table {
  border-collapse: separate;
  background-color: #dedbd9;
  margin: auto;
  width: 98%;
  border-radius: 30px; 
  overflow: hidden;
  margin: 0 auto; 
}

.border-left {
    position:relative;
}
.border-left:before {
    content: "";
    display: block;
    border-radius: 10px;
    background: #7d7d7d;
    position: absolute;
    top: 0;
    bottom: -4px;
    left: -5px;
    width: 2px;
}

.cell {
  height: 80px;
}

.student-block {
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  color: rgb(71, 71, 71);
}
<div class="student-schedule"><table class="student-calendar-table"><em>(Table data omitted for brevity)</em></table><div></div></div>

I suggest a complete overhaul of this approach by utilizing CSS grid instead!

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

Determining the primary image in Galleriffic

After a recent inquiry, I am in the process of revamping a webpage to incorporate Galleriffic for optimized image loading, requiring me to delve deep into the intricacies of the task. I am encountering challenges in identifying the currently active image ...

React Native ES6: The problem of undefined being treated as an object

After testing out the Fading Hearts example on React Native Playground, I decided to convert it from createClass syntax to ES6 syntax using classes and methods. The app runs without any issues until I tap on it, which triggers an error message: Undefined ...

Ways to insert a hyperlink within a div element

Consider the following HTML structure: <article id="1919"> <div class="entry-content clearfix"> <div></div> <div></div> </div> </article> &l ...

Unable to correct the positioning of the pop-up in the autocomplete feature

I've been working with the Material-UI <Autocomplete /> component and I encountered an issue where I needed the drop-down to always appear at the bottom. To address this, I made the following adjustment: PopperComponent={(props) => <Popper ...

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: https://i.sstatic.net/hQgpT.png However, I have come across the md-input- ...

Encountering a ReactJS and TypeScript issue with error code TS2322: Unable to assign type to 'IntrinsicAttributes & IntrinsicClassAttributes'

I encountered a TS2322 error when trying to pass the searchForBooks method as props from the JumboBooks component to the SearchBooks component: JumboBooks.tsx (Parent) import { RouteComponentProps } from 'react-router'; ... export class JumboBo ...

The content inside the bootstrap modal is not visible

My goal is to trigger a modal window when a specific div is clicked using bootstrap modal. However, upon clicking the div, the screen darkens but the modal body fails to appear. Code: <html> <head> <title></title> ...

Tips on personalizing MUI X Data Grid Toolbar to exclusively display icons

`function EnhancedToolbar() { return ( <GridToolbarContainer> <GridToolbarIcon icon={<FilterListIcon />} /> <GridToolbarIcon icon={<ViewColumnIcon />} /> <GridToolbarIcon icon={<SettingsEthernetIc ...

Is the AngularJS email validation triggering too soon?

My challenge involves validating an email field in angularjs using the following code: <input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address"> <span ng-show="loginForm.email.$touched ...

In React TypeScript, the property types of 'type' are not compatible with each other

I have a unique custom button code block here: export enum ButtonTypes { 'button', 'submit', 'reset', undefined, } type CustomButtonProps = { type: ButtonTypes; }; const CustomButton: React.FC<CustomButtonProp ...

Attempting to transfer information from a JSON file to a Netflix-inspired platform

Images I am currently working on integrating data from my json file export const products = [ { name: 'iPhone 11', image: '/assets/images (7).jpeg', time: '1 hour 14mins', age: '+16&apo ...

Exploring TypeAhead functionality in Reactjs 18

I have encountered an issue while using react-bootstrap-typeahead version 5.1.8. The problem arises when I try to utilize the typeahead feature, as it displays an error related to 'name'. Below is my code snippet: import { Typeahead } from " ...

Steps for incorporating a new element in Reactjs

While attempting to insert a new element into a React object, I encountered the following issue: const isAdmin = true let schema = { fname: Yup.string().required('Required'), lname: Yup.string().required('Required&apo ...

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

What is the process for linking an HTML form to an API using Express?

How can I establish a connection between an HTML form and an API using Node.js with Express? This is what my form looks like: <form action="/api" id="myform" method="GET"> <fieldset id="question-set1" cl ...

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

Tips for rearranging the icon placement of the parent menu item on Bootstrap Navigation Bar for mobile display

I need assistance with adjusting the position of the bootstrap navigation menu bar parent menu icon, in mobile view. Currently, the menu header displays a right-arrow-down icon at the end of the header name as shown below. https://i.sstatic.net/kv4T2.png ...

Update the html() function to include any content that has been typed into a

I have a webpage structured like this: <div id="report_content"> Some information <textarea name="personal"></textarea> <b>Other information</b> <textarea name="work"></textarea> </div> Whe ...

Is there a way for me to acquire the Amazon Fire TV Series?

I'm currently working on developing a web app for Amazon Fire TV, and I require individual authorization for each app. My plan is to utilize the Amazon Fire TV serial number for this purpose. However, I am unsure how to retrieve this serial using Jav ...