On smaller screens, the left columns of CSS tables are truncated

To demonstrate the issue I am facing, I have created a code sandbox. You can access it by clicking here.

When there is ample space to display all columns, the table looks like this: https://i.sstatic.net/ZOtu8.png

However, when there isn't enough room for the full width, the table appears as shown in this image: https://i.sstatic.net/72zXd.png

In this scenario, scrolling to the right allows access to spell slots 8 and 9, but the left side cuts off class levels and proficiency bonus columns. My goal is to ensure that all columns remain visible without being cropped out. Any suggestions on how I can achieve this seamless scroll functionality?

Answer №1

After some experimentation, a solution emerged.

To begin with, I adjusted the form's positioning to relative.

Next, I applied left: 20rem to the .levels class.

Lastly, various media queries were implemented to address the issue across different screen sizes:

@media screen and (min-width: 512px) {
    .levels {
        left: 15rem;
    }
}

@media screen and (min-width: 768px) {
    .levels {
        left: 10rem;
    }
}

@media screen and (min-width: 1024px) {
    .levels {
        left: 4rem;
    }
}

@media screen and (min-width: 1280px) {
    .levels {
        left: 11rem;
    }
}

@media screen and (min-width: 1536px) {
    .levels {
        left: 8.5rem;
    }
}

@media screen and (min-width: 1792px) {
    .levels {
        left: 4.6rem;
    }
}

@media screen and (min-width: 2048px) {
    .levels {
        left: 0;
    }
}

Answer №2

In the event that you are dealing with a table containing numerous columns and its size exceeds the screen dimensions when viewed on smaller screens, employing the table-responsive class can render the table horizontally scrollable.

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

Is there a way to display a different file, such as index.html, based on the screen width?

I'm facing an issue. I have completed a web page (with HTML, CSS, and JavaScript), but now I want to create a mobile version using different HTML files, another index.html file, and a separate CSS file. What changes do I need to make in the main page ...

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

Styling text on a HTML webpage

Is there a way to center text in the caption and add a link on the far-right of the caption? Let me know if this is possible. The format for the caption should be: Centered Text Right-justified link ...

Arranging buttons in a horizontal row using Bootstrap 3

Please review the example provided below. Link to Example I am looking to have the <a> tag positioned next to Button 2. ...

Using JQuery to Customize Navigation Menu Targeting

On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with a ...

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

Deciding on pixel values, percentages, and sizing elements within CSS styles

For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

What is the most effective method for attaching text to an element without being affected by the spacing of other div elements

Seeking a method to add text after a textbox in-line, without being pushed to a new line by surrounding divs. The aim is for the text to remain close to the textbox, unaffected by wrapper div boundaries but still relative in position. Any viable solutions ...

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

Connecting within a webpage without the use of the pound sign

I have a simple question as I am relatively new to programming, having only started about two weeks ago. I want to create a menu with three options: menu1, menu2, and menu3. My question is how can I create a link without using the hashtag (#)? For exampl ...

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

What is the process for creating a see-through background?

I'm not sure if this question has been asked before, so please forgive me and provide a link if it has. However, I haven't come across it on here yet. My aim is to create a transparent background that displays the wallpaper of the laptop's ...

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

Drifting my dropdown menu bar through the digital sea

I'm having trouble with my navigation bar and I need help styling it. I want the navigation bar to have a dropdown menu when the user hovers over the top level of the navigation bar. The issue I am facing is that the second level of the navigation bar ...

Tips for resizing images to fit the parent container dimensions

After uploading an image, I needed to adjust its dimensions. The original image was 450x700, while the parent container was 400x400. Using 'object-fit' helped fit the image to its parent container while maintaining its aspect ratio. However, I r ...

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

.row { height: 300px; width: 300px; margin: 0 auto; box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3); } <div class="row"></div> <div class="row">< ...

Adjust font size proportions in CSS3

I am currently experimenting with the new font-face feature in CSS3 to use custom TTF/OTF fonts. My question is: can I adjust the default font size ratio? For example, if I am using Tahoma with a default 9pt font size and want to switch to my own custom ...

The Jssor bullet navigator is not visible on the webpage

Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guida ...