I am currently working on adjusting the first two columns of the table, but I am encountering some issues with

I have successfully fixed the first 2 columns of a table, but now there is an extra row showing up in the table header.

.headcol {
  position:absolute; 
  width:7em; 
  top:auto;
  left: 0px;
}
.headcol2 {
  position:absolute; 
  width:15em; 
  top:auto;
  left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped"  style="margin-left: 227px;display: block;height:400px;">
  <thead>
    <tr>
      <th rowspan="2" class="headcol">Membership No</th>
      <th class="headcol2" rowspan="2">Name</th>
      <th rowspan="2">Salary No</th>
      <th rowspan="2">MBS</th>
      <th rowspan="2">Shares</th>
      <th rowspan="2">CD</th>
      <th rowspan="2">RD</th>
      <th colspan="2">special</th>
      <th colspan="2">special</th>
      <th colspan="2">special</th>
      <th rowspan="2">Total</th>
    </tr>

    <tr>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
    </tr>    
  </thead>
</table>

Although I have managed to fix the first 2 columns, there seems to be an issue with the placement of the first interest column on an empty row. Please provide assistance. You can view my design at the following link:

https://jsfiddle.net/rahulpamnani/nnukubyu/1/

htmlcss

Answer №1

To fix the issue, simply delete the line position: absolute as shown below:

.headcol {
  width:7em; 
  top:auto;
  left: 0px;
}
.headcol2 {
  width:15em; 
  top:auto;
  left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped"  style="margin-left: 227px;display: block;height:400px;">
  <thead>
    <tr>
      <th rowspan="2" class="headcol">Membership No</th>
      <th class="headcol2" rowspan="2">Name</th>
      <th rowspan="2">Sallery No</th>
      <th rowspan="2">MBS</th>
      <th rowspan="2">Shares</th>
      <th rowspan="2">CD</th>
      <th rowspan="2">RD</th>
      <th colspan="2">speciak</th>
      <th colspan="2">speciah</th>
      <th colspan="2">speciag</th>
      <th rowspan="2">Total</th>
    </tr>

    <tr>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
    </tr>    
  </thead>
</table>

Hopefully this solution is helpful to you

Answer №2

Adjust the styling to prevent the second heading from overlapping

If this meets your requirements and addresses your concern

.headcol {
  
  width:7em; 
  top:auto;
  left: 0px;
}
.headcol2 {
   
  width:15em; 
  top:auto;
  left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
  <thead>
    <tr>
      <th rowspan="2" class="headcol">Membership No</th>
      <th class="headcol2" rowspan="2">Name</th>
      <th rowspan="2">Salary No</th>
      <th rowspan="2">MBS</th>
      <th rowspan="2">Shares</th>
      <th rowspan="2">CD</th>
      <th rowspan="2">RD</th>
      <th colspan="2">special</th>
      <th colspan="2">special2</th>
      <th colspan="2">special3</th>
      <th rowspan="2">Total</th>
    </tr>

    <tr>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
    </tr>    
  </thead>
</table>

Answer №3

 .headcol 
  {
  position:absolute; 
  width:7em; 
  top:auto;
  left: 0px;
  }
  .headcol2 
 {
  position:absolute; 
  width:15em; 
  top:auto;
  left: 100px;
 }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <table class="table table-bordered table-striped" style="margin-left:227px;display:block;height:400px;">
 <thead>
   <tr>
     <th rowspan="2" class="headcol">Membership No</th>
     <th class="headcol2" rowspan="2">Name</th>
     <th rowspan="2">Salary No</th>
     <th rowspan="2">MBS</th>
     <th rowspan="2">Shares</th>
     <th rowspan="2">CD</th>
     <th rowspan="2">RD</th>
     <th colspan="2">special1</th>
     <th colspan="2">special2</th>
     <th colspan="2">special3</th>
     <th rowspan="2">Total</th>
     <th>  </th>
   </tr>
   <tr>
      <th>  </th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>  </th>
   </tr>

Add an additional column in the second row to keep the first two columns of the table fixed when scrolling horizontally.

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

The third @media query for max-width is not functioning as expected in the CSS

Looking to create a responsive card section on my website for various screen sizes. The goal is to display 5 cards per row when the screen width is greater than 1300px, maintain 3 cards per row from 1024px to 1300px, and then switch to only 2 cards per row ...

htmlcssresponsive-designmedia-queries

Placing three div elements within a container, one of which has a height set to auto

I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as the container div. <div id="container ...

htmlcss

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

htmlvb.netprintingdatatablereporting

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...

javascriptphphtmldropzone.js

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

javascriptjqueryhtmlcssjsfiddle

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

Changing from a vertical to horizontal menu as the parent div is resized

I am looking for a solution to create a CSS effect or Javascript code that will hide a menu inside a div when the browser window or parent div is resized. I want to display another div with the same menu in horizontal orientation when the first one is hidd ...

javascriptjquerycssresizemedia-queries

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

What is the process for sorting non-integer records in MySql?

I need help sorting MySQL records in descending order to retrieve the most recent entry. Here are the records stored as strings: 1/2017 1/2018 2/2017 2/2018 3/2017 I specifically want to retrieve the value 1/2018. The entries correspond to each year an ...

phphtmlmysqlphpmyadmin

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height propert ...

htmlcssemailoutlookhtml-email

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

javascripthtmlangularjs

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

My email recipients primarily use Gmail as their email service provider. To address this, I saved the contents of this page as an HTML file named index.html and stored it on my drive for easy sending. However, the issue lies in the fact that the page does ...

htmlemailgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

javascriptcssthree.js

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

As a beginner in coding, I am struggling to find a solution using an if statement for this particular problem. Although I can achieve the desired result with HTML code and options, this time I need to use arrays and an if function. My goal is to create a ...

javascripthtml

How can I apply a shadow effect to a <View> element just like a regular tab bar?

My customized navigation bar is using the <View> element. https://i.sstatic.net/QA8Ad.png Is it possible to add a bottom shadow similar to the default react-navigation bar (refer to the image below)? https://i.sstatic.net/ORD8J.png I find it chal ...

cssreactjsreact-nativereact-navigation

Angular 7 routing glitches causing page refresh issues

Here is the issue I'm facing: I am looking for a way to switch between tabs in my navigation bar without having to refresh the entire website. I have just started working with Angular and I believe that the router should be able to route to a new pag ...

angularhtmlroutesfrontendangular7

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

The journey of a JavaScript file within an iframe devoid of any src attribute

Consider this scenario: In a folder labeled /jscript, there are two files named my_js_file1.js and my_js_file2.js. I also have an /index.html page structured like this: <html> <head> <script type='text/javascript' sr ...

javascripthtmliframe

Is it possible to activate the identical drop-down or popover with multiple buttons?

Is it possible to activate the same drop-down menu with multiple buttons? For example, I want a button at the top of the page labeled special menu, another in the middle also labeled special menu, and one at the bottom as well labeled special menu. When a ...

javascripthtmlbootstrap-4dropdownpopover

What is the best method for transforming an HTML file into an ICS (iCal) file?

Hello there! I am interested in converting an HTML file (website) to an iCalendar file (iCal). Is this even possible? If so, how can it be achieved? Does anyone have any ideas or recommendations on how to proceed? Thank you in advance! ...

htmlconvertersicalendarrfc5545