Displaying information in a table with a fixed column width and the

I am attempting to create a table with fixed columns and scrolling functionality similar to the example at this link:

Here is the source code for reference:

The main issue I am facing is that in the provided sample, the table has fixed widths and heights in "px", but I need it to adapt to the screen size by replacing the fixed values with percentages ("%").

Can anyone assist me with this problem? I am struggling to implement the changes while still retaining the vertical scroll functionality.

Thank you!

htmlcss

Answer №1

To create a responsive layout, place a div inside the columns and insert text inside the div. Ensure that height:100% is set on all elements (especially html and body), width: 100% on the table, and overflow: auto on the div.

(See demo here)

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
table {
    width: 100%;
    height: 100%;
}
div {
    height: 100%;
    overflow: auto;
}

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

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

htmlcssinternet-explorer

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

What is the best method for flipping the sequence of elements in media queries?

I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM. ...

htmlcssflexbox

Tips for updating text in a freshly opened window using JQuery or JavaScript

I have a function that is triggered by a button click to open a new window or tab, display an alert, and update text. Here is the code snippet: function nWin(p) { var setStyle = "<style rel='stylesheet'>\ .vTop {\ ...

javascriptjqueryhtmlcss

Pass the disabled select option value to a form using a hidden input field

My Django form has a section that is set up like this: <select {% if 'ba1' in widget.name or 'bs1' in widget.name or 'pm2' in widget.name %} disabled {% endif %} id="{{ widget.attrs.id }}" ...

htmldjangodjango-templates

Styling: How can I create indentation for a specific text area while leaving another unaffected?

I am attempting to format this complete form with an indentation: <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %> <div class="field"> <p2>Who are you?</p2> ...

cssruby-on-rails-3

Chrome's CSS image transitions are causing interference with surrounding elements

I recently encountered an issue with my menu, where images used as backgrounds for buttons would animate on hover. Surprisingly, when I hovered over an image and it animated (by enlarging and rotating), other elements on the page would shift slightly witho ...

htmlcssgoogle-chromecss-transitions

Verify the status of the nested reactive forms to determine if the child form is in a dirty state

I am working on a form that consists of multiple sections within nested form groups. I need to find a way to detect when changes are made in a specific section. Here is the HTML structure: <div [formGroup]="formGroup"> <div formGroupN ...

htmlangulartypescriptangular-reactive-formsformbuilder

Executing a JavaScript function when a column in a Fusion Chart is clicked

I have two div elements in HTML and I would like to have div2 load when div1 is clicked. Additionally, whenever div2 loads, a back button should also appear to return to div1. Is there a way to achieve this using HTML? <td background="images/bgTd.gif ...

javascripthtml

Is it possible to incorporate cmd.exe into an HTML file?

Currently in the process of creating an online batch tutorial and aiming to integrate the Windows command prompt as a dynamic element on my webpage. Initially attempted using the html5 embed tag, however encountered an error stating unsupported plugin. S ...

html

What is the best way to upload a canvas image from a GUI to the back-end using an AJAX call and setting the content-type as "image/jpeg"?

What is the best method for saving a canvas image from GUI to back-end using an AJAX call that accepts content type "image/jpeg" and avoids the error "jquery.js: 8453 Uncaught TypeError: Illegal invocation?" HTML <canvas id="myImage"></canvas> ...

javascriptjqueryhtmlajaxcanvas

Adaptable HTML design with alignment features

Here is the structure I am working with: <style> #main { max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid red; } #container{ margin-right: -50px; } .block{ display: inline-block; width: 100px; height: 100px; border: 1px solid gr ...

htmlcss

Issue with Quantity Box not displaying values in Shopify store

I am currently seeking assistance with resolving an issue I have encountered on a Shopify theme that I recently customized. The problem lies within the quantity box on the live site where despite being able to adjust the quantity using the buttons, the act ...

javascriptjqueryhtmlcssshopify

Adjust the position of an element based on changes in window size using jQuery

Wondering if this question is unique, as I've spent quite some time searching for a solution to this issue without any luck. Perhaps my search criteria aren't correct. I have a navigation bar that becomes fixed when it reaches the top of the vie ...

javascriptjqueryhtml

The view has no access to $scope but the controller does

I need to display the iso code using a $scope when selecting a country from a list. The list of countries is fetched through a $http call in a factory and then stored in a scope. ///////// get countries //////////////// tableFactory.getCountries().then(f ...

javascripthtmlangularjs

What could be the reason for the mouseleave event not functioning properly?

I have a JSFiddle that is working perfectly. Check out my Fiddle here. In my code, I am trying to make a div change colors when hovered over and then back to its original color when the mouse moves out. It works fine on JSFiddle but not locally. When I r ...

jqueryhtmlcss

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility. Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slid ...

javascripthtmlcssswiper.js

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...

javascriptc#jqueryhtmlcss