Fixing the alignment of the left column table in Bootstrap 3.3.7

Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7?

I attempted to use position: fixed; but it didn't work as expected.

Any suggestions on what I should do next?

Check out this fiddle for reference

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered">
  <tr>
    <td colspan="15"> Thu 05 th Apr, 2018</td>
  </tr>
  <tr>
    <td> Name </td>
    <td> 08.00-08.30 </td>
    <td> 08.30-09.00 </td>
    <td> 09.00-09.30 </td>
    <td> 09.30-10.00 </td>
    <td> 10.00-10.30 </td>
    <td> 10.30-11.00 </td>
    <td> 11.00-11.30 </td>
    <td> 11.30-12.00 </td>
    <td> 12.00-12.30 </td>
    <td> 12.30-13.00 </td>
    <td> 13.00-13.30 </td>
    <td> 13.30-14.00 </td>
    <td> 14.00-14.30 </td>
    <td> 14.30-15.00 </td>
  </tr>
  <tr>
    <td> Jack </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

jqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a shot.

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}


.long {
  height:35px;
  letter-spacing: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
<table class="table table-hover table-striped table-bordered">
  <tr>
    <td colspan="15"> Thu 05 th Apr, 2018</td>
  </tr>
  <tr>
    <th class="headcol"> Name </th>
    <td class="long"> 08.00-08.30 </td>
    <td class="long"> 08.30-09.00 </td>
    <td class="long"> 09.00-09.30 </td>
    <td class="long"> 09.30-10.00 </td>
    <td class="long"> 10.00-10.30 </td>
    <td class="long"> 10.30-11.00 </td>
    <td class="long"> 11.00-11.30 </td>
    <td class="long"> 11.30-12.00 </td>
    <td class="long"> 12.00-12.30 </td>
    <td class="long"> 12.30-13.00 </td>
    <td class="long"> 13.00-13.30 </td>
    <td class="long"> 13.30-14.00 </td>
    <td class="long"> 14.00-14.30 </td>
    <td class="long"> 14.30-15.00 </td>
  </tr>
  <tr>
    <th class="headcol"> Jack </th>
    <td class="long"></td>
    <td class="long"></td>
    <td></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
    <td class="long"></td>
  </tr>
</table>
</div>

Answer №2

Check out the table example below:

jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); 
    });
.table-scroll {
    position:relative;
    max-width:1024px;
    margin:auto;
    overflow:hidden;
}

.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
    padding:5px 10px;
    background:#fff;
    white-space:nowrap;
    vertical-align:top;

}
.table-scroll thead, .table-scroll tfoot {
    background:#f9f9f9;
}
.clone {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}
.clone th, .clone td {
    visibility:hidden
}
.clone td, .clone th {
    border-color:transparent
}
.clone tbody td:first-child {
    visibility:visible;
    color:black;
}
.clone .fixed-side {
    visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}
<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table table table-bordered">

      <tbody>
        <tr>
          <th colspan="15" class="fixed-side"> Thu 05 th Apr, 2018</th>

        </tr>
        <tr>
          <th class="fixed-side">Date</th>
          <td> 08.00-08.30 </td>
    <td> 08.30-09.00 </td>
    <td> 09.00-09.30 </td>
    <td> 09.30-10.00 </td>
    <td> 10.00-10.30 </td>
    <td> 10.30-11.00 </td>
    <td> 11.00-11.30 </td>
    <td> 11.30-12.00 </td>
    <td> 12.00-12.30 </td>
    <td> 12.30-13.00 </td>
    <td> 13.00-13.30 </td>
    <td> 13.30-14.00 </td>
    <td> 14.00-14.30 </td>
    <td> 14.30-15.00 </td>
        </tr>
        <tr>
          <th class="fixed-side">Name</th>
          <td>jack</td>
         <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
          <td>jack</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

javascripthtmljquerycss

I recently edited my htaccess file to redirect my webpage, but now I'm facing issues with my CSS, images, and

Here is the htaccess code I am using: RewriteRule ^example1/([A-Za-z-]+)/?$ example2.php?name=$1 [NC] The page is loading, but the CSS and JS are not rendering correctly. Can anyone assist me in resolving this issue? ...

phphtmlcss.htaccess

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

javascripthtmlcss

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

htmlcssalignmentfigurecaption

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

This code snippet uses ChakraUI styling and retrieves images from SanityCMS: <Box w="500px" h="500px" bg="red"> <Image src={allArtPieces[0].imageUrl} alt={allArtPieces[0].title} width="500px" ...

javascriptcssreactjsnext.jssanity

Modify font color in collapsed state of bootstrap navbar dropdown

I've been attempting to modify the font color displayed in the image to ensure it stands out clearly. https://i.sstatic.net/e6VdG.png This is a simple bootstrap 3 navbar. Here's the HTML code: <nav class="navbar navbar-custom"> ...

csstwitter-bootstraptwitter-bootstrap-3

Jquery causing Selenium to throw an error message "SCRIPT1004: Expected ';' " during execution

I am encountering an issue while trying to run jQuery in Selenium with the code below. Despite trying several different versions of jQuery min files, I continue to get the following error: Error : SCRIPT1004: Expected ';' Code : String mouseOv ...

jqueryseleniumselenium-webdriver

Could you assist me in navigating the process of creating a dynamic 10x10 multiplication table using HTML and JavaScript? I'm eager to learn where to begin with this methodology

As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...

javascripthtmloperatorshtml-table

Error: Chrome is reporting an "Unexpected token :" while Firefox is showing a "SyntaxError: missing ; before statement" issue

Here's the code snippet in question: function getCategoryResponse() { var appid = "1"; $.ajax({ type: 'GET', url: 'http://itunes.apple.com/WebObjects/MZStoreServices.woa/ws/genres?id=36&callback=myCallbackFu ...

javascriptjqueryajax

Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks: <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.p ...

htmlcsstwitter-bootstrapbootstrap-4

How come my Ajax response is showing up above my navigation menu?

Every time I scroll my mouse, the admin cards end up covering the navbar, which is really annoying. I can't figure out where I went wrong with this issue. Any assistance would be greatly appreciated. Thank you! #mainsec { height: 100vh; width ...

htmljquerycssajaxnavbar

My code to hide the popup when clicking outside doesn't seem to be working. Can you help me figure out why?

After searching around on stackoverflow, I stumbled upon a solution that worked for me: jQuery(document).mouseup(function (e){ var container = jQuery(".quick-info"); if (container.has(e.target).length === 0) { container.hide(); } }); ...

javascriptjqueryjquery-selectors

Tips for resolving jQuery conflict problems

I am dealing with a jQuery issue where I have two scripts - one for the slider and the other for a dropdown menu. When I remove one script, the slider works but the dropdown doesn't, and vice versa. I have looked at tutorials online on how to resolve ...

javascriptjquery

Deploying static files with Django in a production environment

My Django application is functioning properly on Ubuntu 14.04 with nginx 1.10, Django 1.10.2, and uWSGI 2.0.14. It is able to load static files such as JavaScript, CSS, and images, but the CSS files are not being applied to my website. Below is the configu ...

pythoncssdjangonginxstatic

Creating a dynamic 3D pie chart with Highcharts and JSON data

I am attempting to create a 3D pie chart using HighChart with JSON data. Despite enabling the 3D option, it only displays in 2D. Here is an example of the 3D pie chart I am trying to achieve: https://www.highcharts.com/demo/3d-pie Could someone please he ...

javascriptjqueryhighcharts

Why is it that PHP is used to retrieve the database value, JavaScript increments it, and AJAX saves it back to the database, yet it resets to 0.0 upon page refresh?

I am in the process of creating a page for setting temperature targets. The form allows users to adjust the target temperature by increments of 0.5 using JavaScript buttons. Once the user is satisfied with the new target, they can click 'set' whi ...

javascriptphpjqueryajaxforms

Is jQuery failing to correctly validate the RadioButtonList?

Using jQuery, I am attempting to validate a RadioButtonList to make sure that the user has selected one of the values. If none of the radio buttons are checked, an alert message should appear. However, even after selecting a radio button, the alert continu ...

javascriptjqueryasp.netvalidation

Tips for displaying or concealing data in table cells in Google Charts

Using a Google charts table to display server exceptions, but the errors are too long for cells. How can I show only an excerpt of error messages in each cell with a + expansion sign for full details in a modal box on click? I have successfully implement ...

javascriptjqueryhtmlgoogle-visualization

How come modifying the css of one component impacts all the other components?

Issue: I am struggling to make CSS changes only affect the specific component I want, without impacting other elements on the page. My goal is to style my dropdown menu without affecting other text input fields: https://i.sstatic.net/Caidv.png Background ...

cssangular