Sticky Table Fun: a Unique Approach with Html and Css

I have an image of a table that I am working with. Here is the image for reference: https://i.sstatic.net/ak9Rp.jpg

My goal is to make the total row sticky on the table while allowing columns like Math, History, and Biology to scroll horizontally. Currently, the Math column is next to the Total, but I also want History or Biology to be positioned next to the Total as needed. Here is a snippet of my code so far:

.last-workouts .last-workout-table {
    border-radius: 20px;
}

// More CSS styling rules here...


// HTML structure here...

If you have any suggestions on how I can achieve this layout, please let me know. Thank you

htmlcsshtml-table

Answer №1

Enclose .test and .result inside an internal table and apply position: sticky; left: 0; to the outer td.

.last-workouts .last-workout-table {
  border-radius: 20px;
}

.last-workouts table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

.last-workouts table .tests:not(:last-child) {
  border-bottom: 1px solid #050a6c;
}

.last-workouts .test {
  background-color: #00bad6;
  text-align: center;
  color: #FFFFFF;
  padding: 1rem 0;
  width: 20%;
}

.last-workouts .test .number-test,
.last-workouts .test .type-test {
  font-weight: bold;
}

.last-workouts .result {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 12%;
  background-color: #F0F0F0;
}

.last-workouts .inner-table {
  border: none;
}

.last-workouts .inner-table tr:not(:last-child) {
  border-bottom: 1px solid #a9a9a9;
}

.last-workouts .total {
  color: #00bad6;
  font-weight: bold;
  padding: .25rem;
}

.last-workouts .inner-table .box td {
  padding: 0.5rem;
  border: 1px solid #a9a9a9;
}

.last-workouts .inner-table .box .bold {
  font-weight: bold;
}

.last-workouts .inner-table .box .bold.red {
  color: red;
}

.last-workouts .inner-table .box div {
  padding: .5rem;
}

.last-workouts .lessons {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 12%;
}

.last-workouts .lessons:not(:last-child) {
  border-right: 2px solid #000000;
}
<div class="last-workouts">
  <div style="overflow-x:auto;" class="last-workout-table">
    <table>
      <tr class="tests">
        <td style="position: sticky; left: 0;">
          <table>
            <td class="test">
              <div class="number-test">TYT-1</div>
              <div class="type-test">Genel Deneme</div>
              <div class="date">30.08.2021</div>
            </td>
            <td class="result">
              <div class="total">
                Toplam
              </div>
              <table class="inner-table">
                <tr class="box">
                  <td>S</td>
                  <td>D</td>
                  <td>Y</td>
                  <td>B</td>
                  <td class="bold">Net</td>
                  <td class="bold">Puan</td>
                </tr>
                <tr class="box">
                  <td>115</td>
                  <td>80</td>
                  <td>6</td>
                  <td>16</td>
                  <td class="bold red">17.48</td>
                  <td class="bold red">490,54</td>
                </tr>
              </table>
            </td>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Matematik
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Turkce
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Tarih
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </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

Executing PHP Code with an External JavaScript File in an HTML Document

I have a script called initialize_database.js that utilizes JQuery to trigger a PHP script for creating a database and some tables. I made sure the PHP script is working correctly by adding HTML to test it independently, and it performed as expected. Below ...

javascriptphpjqueryhtml

Tips for adding a button to the SB Admin 2 Card header without altering its height

I am currently utilizing the SB Admin 2 template for my project and encountering difficulty when trying to add a button in the card header without altering the default height. The goal is to maintain a consistent look across both cards, as illustrated in t ...

htmlcssbootstrap-4

How to save an image in Internet Explorer browser without opening it automatically

Is there a way to download an image in Internet Explorer using the <a> tag without it opening in a new tab? Since IE does not support the HTML5 <download> tag, I am looking for a solution to directly download the image instead of opening it. ...

javascripthtmlinternet-explorer

CSS - my expectations of reduced content were not met

I'm attempting to create a responsive content box that shrinks properly when the browser size is reduced. https://i.sstatic.net/wQD8j.png However, I am facing an issue where the content (yellow) does not shrink and instead overflows horizontally whe ...

cssflexbox

Issue with jQuery functionality when page is loaded through AJAX request

My index page currently has jQuery and a js file for a slider plugin loaded. I am using an on click event to load an external page using .load. Here is the code snippet: //jQuery loaded from Google CDN here (in head) jQuery( document ).ready(function() { ...

javascriptjqueryhtmlajax

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

htmlcssimage

Issue with Vuetify carousel not resizing to fit the entire width and height

I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...

javascripthtmlcssvue.jsvuetify.js

Tips for vertically centering text within a panel using Bootstrap 3

I am facing an issue where I have an image and a description inside a panel panel-default. The image is floated to the left while the description is on the right side. The image has the img-responsive class so that it adjusts according to the panel body w ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

I am encountering an issue where the key is not located in the response array in PHP, causing my JavaScript chart to remain

Hey there! I'm currently working on a school project and could really use some assistance. The task at hand involves creating a web interface that can interact with an endpoint in order to: - Authenticate a registered user to retrieve an authenticati ...

javascriptphphtmlhighcharts

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

Navigating through pages in React using Pagination Animations

Attempting to style an active button with a small transition when it receives that attribute has been a challenge. The same issue occurs with the paragraph rendered from the data file. function Pagination() { const [selected, setSelected] = useState(0) ...

javascriptcssreactjspaginationcss-transitions

Capture the item selected from the dropdown using ng-model to retrieve the name instead of the

I need help getting the name/text/html of the selected option in a dropdown using angular.js, rather than just its value. Currently, I have this setup which retrieves the value: Here is my HTML code snippet <select class="SelectCar" ng-model="Selected ...

javascripthtmlangularjs

Delineating the execution of a PHP function through a button click using HTML/Javascript

I have a need to trigger a specific PHP function by simply clicking on a button. Currently, I am working with the following code snippet: <table class='standardtable'> <tr> <th>Event</th> <th>Group</th> ...

javascriptphpjqueryhtml

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

Display the dropdown selection

I am trying to customize my dropdown menu so that when I hover over the main menu item (Sample Page), only the About submenu is displayed, not all of the dropdown menus. li.menu-item.dropdown .dropdown-menu { position: absolute; top: 70px; visibil ...

jqueryhtmlcss

When the label is clicked, the radio button does not have a selected value

I am experiencing some strange behavior with a radio button, as shown in the attached GIF. Whenever I click on the label, the selected value disappears and the radio buttons become unchecked. I have been unable to identify the cause of this issue. I am ...

jqueryhtmlbootstrap-4

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

Is there a way to prevent pixels from being rendered outside of a designated rectangle in HTML5?

I'm looking to add screen-in-screen functionality to my HTML5 game, and I have an idea for how to approach it: //Function called every frame function draw(){ set a mask rectangle only draw pixels from the current frame that fall within this recta ...

javascripthtml

The hiding/showing of elements is not being executed correctly by jQuery

My web template includes HTML and jQuery code for a project I'm working on. During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning". The code properly ...

javascriptjqueryhtmlcss

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts