GridView with scroll functionality across various web browsers

I have set up a scrollable gridview with a table that mirrors the header of the grid. Each column has a specific width in pixels, but it seems to render differently across various browsers. Any assistance would be greatly appreciated.

This is the HTML markup for the Grid header:

<table  cellpadding="0" cellspacing="0">
            <tr>
                <th width="26px">
                </th>
                <th width="152px">
                    Social security number
                </th>
                <th width="122px">
                    Surname
                </th>
                <th width="121px">
                    Name
                </th>
                <th width="120px">
                    Father's name
                </th>
                <th width="50px">
                    Gender
                </th>
                <th width="100px">
                    Date of birth
                </th>
                <th width="122px">
                    Flight departure date
                </th>
                <th width="102px">
                    SUN (old)
                </th>
                <th width="150px">
                    Taxpayer TIN
                </th>
                <th width="102px">
                    SUN
                </th>
                <th width="102px">
                    Date of death
                </th>
            </tr>
        </table>
asp.nethtmlcss

Answer №1

If you're tired of juggling multiple tables for headers and data, opt for a streamlined approach by using just one table...

Consider structuring it like this to ensure your columns are displayed in the right proportions:

<table cellpadding="0" cellspacing="0">
        <tr>
            <th width="26px">
            </th>
            <th width="152px">
                Social security number
            </th>
           .....
            <th width="102px">
                Date of death
            </th>
        </tr>
        <tr> <!-- Insert your data here -->
        </tr>
        <tr> <!-- Enter data here -->
        </tr>
    </table>

Answer №2

According to Blachshma's suggestion, utilizing just one table can ensure consistent column width across various browsers. Additionally, creating a scrollable table or gridview is a straightforward process.

Give this method a try:

<div style="max-width:500px;overflow:auto;">

    // Insert your HTML code for the table or gridview here

</div>

I hope this solution proves helpful to you! Thanks.

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

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

The hamburger symbol on my website is failing to show the menu options

I'm having trouble getting my burger icon to display the navigation menu on mobile devices. I've tried adjusting functions in my JavaScript and tweaking the media queries in my CSS file, but the menu still won't show up when the page size is ...

javascripthtmlcss

Can you modify a single attribute for multiple child elements under a parent tag in Visual Studio Code simultaneously?

Imagine a scenario where you are faced with 30-40 options and need to update the name attribute from blank to something more appropriate. Is there a method in visual studio code that allows you to do this in one go? It would be a fantastic feature to have. ...

htmlvisual-studio-code

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Please help me with a solution. I have developed a registration form which effectively saves users' information in a Google Sheet. However, now I am yearning to create a login form that verifies the stored data and redirects the user to a different pa ...

javascripthtmlcssformsgoogle-apps-script

Retrieve the <style> tag response and inject it into the head section of the HTML using React

Although I am aware that this may not be the best practice, it seems to be the most suitable solution for this particular case. The server response contains something like this: <style id="styles">.color_txt{color:green;}</style> I am attempt ...

javascriptcssreactjs

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

javascripthtmlcss

Select a radio button when it is in focus

I am having trouble figuring out how to automatically check a radio button when a user clicks on an input field. The code I have attempted is not working as expected... $(function() { $('.searchInput').focus(function() { $(this).prev( ...

jqueryhtml

React - using dangerouslySetInnerHTML does not display the expected output

When I enter the following text in the textbox labeled "Type Here" AAA: <HEllo> BBB: <HE llo> The desired result should be identical to what is entered in the "Type Here" box. However, the actual result box does not display the same output ...

htmlreactjs

Creating a responsive Image for desktop screens with the help of Tailwind and nextJS

I'm currently working on a component that displays a set of images with horizontal scroll. The challenge I'm facing is setting different dimensions for mobile/tablet screens and desktop screens. For mobile and tablet, I want the images to be disp ...

cssnext.jstailwind-css

Focus the text on a specific letter

I am attempting to align a phrase in the center of my navigation bar, which has been built using Bootstrap. Currently, the navbar appears as follows: Centered Navbar title My goal is to center the "|" symbol with the text adjacent to it on both sides, ...

htmlcsstwitter-bootstrapnavbarcentering

Generating CSS styles based on an HTML document

I have a file with numerous HTML elements: <div> <div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP ...

javahtmlcss

Steps to create spaces between the bootstrap cards

Just diving into Bootstrap and attempting to incorporate images as cards, I encountered a challenge where the cards were piling up one after another without any spaces between them. Below is the code snippet utilizing Bootstrap4: <body> <div class ...

csstwitter-bootstrapbootstrap-4

Is it possible for webdriver to retrieve the URL of the style sheet being utilized by a specific element?

Currently, I am working on a test scenario where I need to confirm that altering an option in a dropdown menu modifies the styling of the page. I am curious if Webdriver has the ability to retrieve the URL of the CSS document from an element. This appear ...

javascriptc#cssseleniumselenium-webdriver

Display database items in ng-repeat in reverse order

In my MongoDB database, there is an 'photos' array that gets updated whenever users upload new pictures from Instagram at specific locations. Each time a new photo is added, it goes to the end of the array. However, this is causing a problem for ...

javascripthtmlangularjsmongodb

A PDF error message was generated due to a damaged file that could not be repaired

After creating a PDF file and sending it in an email message, I encountered an issue while trying to open the PDF. The error message displayed: "There was an error opening this document. The file is damaged and could not be repaired". Here is the code sn ...

c#.netasp.netpdfitext

What is the best way to incorporate a new attribute into a particular CSS class?

Just to provide some context, I am relatively new to all of this. Please bear with me. I have a unique CSS class that is specifically assigned to thumbnail images on my Wordpress website. Currently, I am using a script that adds a "Pin it" hover link to a ...

jqueryhtmlcsswordpress

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...

htmlrshinytransitiondt

Access a three.js scene from a canvas element within the local environment to make alterations

Is it necessary to keep Three.js variables (scene, camera, renderer etc.) globally? I have devised a function that initializes canvas elements by taking a DOM position and other information to build the scene. This function is then passed to a render func ...

javascripthtmlcanvasscopethree.js

Tips for interpreting PLC switch bits using a C# application

I have been developing a C# application to interact with a Mitsubishi PLC, where I need to read the date and time of the PLC and display it in a DataGridView within the application. The issue I am facing is that when I store the date with the year in D11 ...

asp.netc#-4.0c#-3.0plcplc4x

Issue involving two cards within a radio group

Within my design, I placed a radio button in two cards and grouped them together by nesting the cards inside a btn-group. While this setup functions well, it encounters layout issues on small display sizes. Specifically, when the screen shrinks to xs size, ...

htmlcssbootstrap-4