How about locking the initial column of a table and ensuring a uniform height with the header row configured to wrap any excess whitespace?

My goal is to create an HTML table with specific properties:

  • The first column should be frozen
  • The text on the header row should be wrapped

Although it sounds simple, I am encountering an issue where the height of the first column in the header row is incorrect. It does not match the height of the rest of the row. Here is an example of what I'm dealing with:

tr th {
    white-space: pre-wrap !important;
}

tr td {
    white-space: nowrap;
}

.first-column {
    position: absolute;
    width: 140px;
    background-color: aliceblue;
    white-space: nowrap;
}

.first-column.header {
    background-color: red;
}

.second-column {
    padding-left: 145px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="first-column header">Aaaaa aaaaa</th>
                        <th class="second-column">Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>...<!--Duplicate content removed-->
htmlcsshtml-table

Answer №1

It seems that the issue with the position:absolute not working is due to the table not applying the row height to an abspos cell as it would for an inflow cell. There's a possibility that the browser-imposed display:table-cell might be disregarded for abspos cells.

To address this, you can try using the relatively new position: sticky property along with left: xx. This eliminates the need to duplicate the width in the second column's padding to accommodate the first column.

tr th {
    white-space: pre-wrap !important;
}

tr td {
    white-space: nowrap;
}

.first-column {
    position: sticky;
    left: 0px;
    width: 140px;
    background-color: aliceblue;
    white-space: nowrap;
}

.first-column.header {
    background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="first-column header">Aaaaa aaaaa</th>
                        <th class="second-column">Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    // More rows...
                </tbody>
            </table>
        </div>
    </div>
</div>

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 adjust the background color of the clicked tab with divs and revert the others back to their original color?

<span class="row top-bar-left align-items-center" style="width: 80%; float:left"> <div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active" [qu ...

htmlcssangular

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

javascripthtmlcssnode.jsexpress

Individual ".htaccess" and ".htpasswd" files are created for every webpage

I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...

html.htaccess

Clickable link unresponsive on parallax-enhanced webpage

Currently, I am utilizing Zurb foundation's Manifesto theme for creating a parallax scrolling landing page. The anchor tag is essential for the scrolling effect on this page, causing a conflict when regular anchor links are included. Here is the HTML ...

javascriptjqueryhtml

Tips on applying array values as styles to a div element

I have a list of numbers stored in an array and an equal number of div elements. I need to assign each value from the array to a corresponding div. var xList = [265, 152, 364] var yList = [125, 452, 215] All div elements have the same class name. function ...

javascripthtmlcssarrays

Saving a boolean option (Yes or No) via a radio button in a MySQL database

When it comes to storing Yes/No form radio button values in a PHP/MySQL application, I've noticed a variety of approaches. I'm curious to know which method is considered more effective and why. The scenario involves a typical Yes/No question with ...

phpjqueryhtmlformscodeigniter

Certain browsers are causing issues with the jQuery data-action="save" button not getting posted as expected

My form successfully captures a signature and sends it to an MVC4 controller action when using Internet Explorer, but it doesn't work on Chrome or some mobile devices. Can anyone help me figure out why the form isn't submitting in certain situati ...

jqueryhtml

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes. I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was: ...

htmlcssradio-buttonalignment

Simplified jQuery function for multiple div mouseover operations

Uncertain about the accuracy of my title. Due to certain reasons, I need to assign different IDs for the class, as it only detects ID and not class when hovered over. Therefore, I have created a CSS version where the opacity of a specific div will change t ...

javascriptjquerycsshovermouseover

Implement a popmenu for navigation when the menu is too lengthy

Is there a way to create a dynamic breadcrumbs navigation that adjusts based on the page width, and displays certain elements in a dropdown menu if the navigation becomes too lengthy? For example, consider the following list: <div> <nav> ...

htmlcssbootstrap-4angular-ui-bootstrap

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

phpjavascriptcsscaching

Gradually bringing a tag into view, gently fading it away, and then altering the text before beginning the cycle anew

I have a situation where an tag's content is being dynamically changed with jQuery and then faded in and out using the Velocity JS library along with the setInterval function. Initially, everything works smoothly for about 30 seconds. However, after ...

javascriptjqueryhtmlcss

How can we check if this element is empty using jQuery?

If the <p></p> on the second page is empty, I want to jump from the first page to the third. Or if it's empty on the third page, then jump to the fourth. $(".lr1").click(function() { $(".p1").slideUp("fast"); $(".p2").slideDown("fas ...

javascriptjqueryhtml

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

phphtmlwordpresspostcustom-post-type

Utilizing AngularJS to dynamically inject HTML content into $scope

In my possession are the following files: index.html //includes instructions for passing arguments to the btnClick function in app.js <div ng-bind-html="currentDisplay"></div> app.js app.factory('oneFac', function ($http){ var htm ...

javascripthtmlangularjshttp

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

javascripthtmlangularjsangularjs-directive

The `@import` statement fails to load styles even when the URL is perfectly accurate

I am attempting to implement CSS styles. @import url("http://mydomain.com/theme/css/reset.css") However, it seems that the styles are not being applied. When I access through the browser, I can see all the CSS rules loading. What am I doing incorrectly ...

css

Arrangement of divs to showcase Background images

Apologies in advance for any errors in my code or question, as I am still learning about coding. Please forgive the spacing in links and lack of correct use of characters - < - I'm having some trouble posting code :) I am working on a website call ...

csshtmlbackground-imageprestashop

What information is transferred when the submit button on a form is clicked?

Currently, I am utilizing node.js along with the jade templating engine. Within my jade file, I have a form structured like this: form.form-signin(style="padding-left:10px", action='/update', method='post') table.table.table-hove ...

javascripthtmlnode.jsformspug

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

javascriptphphtml