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

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

javascriptcssreactjsnext.js

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

Preventing CSS shapes from overlapping with the next DIV

I'm currently working on creating a V-shape using CSS. While I have successfully created the shape, I am facing an issue where I cannot get the shape to appear "above" another div with a background image when it is placed before it and made negative. ...

csstwitter-bootstraptwitter-bootstrap-3shapes

Is it possible for me to utilize the functionality of the "for" attribute in the label?

After searching extensively online with no luck, I found myself wondering if anyone is aware of a resource similar to the one provided by caniuse.com that outlines browser support for the for attribute within a label tag? I am specifically interested in t ...

html

Ways to apply distinct styles to various ids and common classes

When dealing with multiple IDs such as id1, id2, and id3 that share common classes like .selectize-input and .select-dropdown, it can become cumbersome to set styles individually for each ID. Instead of writing: #id1 .selectize-input, #id2 .selectize-inp ...

htmlcss

Infinite scrolling made effortless with jQuery and Ajax

I am attempting to create a basic infinite scroll feature that monitors when the user scrolls to the bottom in an HTML file. Once the bottom is reached, it should then load additional content from another HTML file which contains more text. The second HTM ...

javascriptjqueryhtmlajax

The evolving impact of the HTML5 <video> element

I've been attempting to find information on this topic, but unfortunately my search has not been very successful. I vaguely recall coming across a tutorial that covered something like this. Does anyone happen to know how to alter the perspective of a ...

jqueryflashhtmlcsscanvas

Encountering Issues with Formatting InnerHtml Text using RegEx

Technology: React.js I have been working on a custom function in JavaScript to highlight specific words within a code block. The function seems to be functioning correctly, but the highlighting isn't staying after the function is completed. Any ideas ...

javascriptjqueryhtmlcssregex

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

javascripthtmljquery

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Avoid changing the button color to a lighter shade when it is clicked

Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...

htmlcssangularionic-frameworkionic5

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss

Is it possible to design this without JavaScript, using only CSS3 and HTML5?

Is it possible to achieve this design using only CSS3 and HTML5, without the use of JavaScript? Header (includes an image) : Height: flexible (depends on the width of the image) Position: fixed Content (contains text) : Height: flexible (height of l ...

htmlcssresponsive-design

Halt the Bootstrap carousel while entering text in a textarea

Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...

javascriptjqueryhtmltwitter-bootstrap

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Can you create a checkbox with a minus "-" symbol inside using just html and css? I attempted to achieve this with JavaScript by using: document.getElementsByTagName("input")[0].indeterminate = true; However, the requirement is to accomplish this using ...

htmlcss

Text enhancement with text-shadow in jQuery and CSS

Before I reached out, I had been searching for a solution. In the process of building my website, I decided to incorporate text-shadow. It seemed straightforward, but turned out to be more complicated than expected. I discovered that IE does not support ...

jquerycss

When trying to find a substring within a string in JavaScript, the "else if" statement may not be triggered

I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...

javascripthtml

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

javascripthtmlcss

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

javascripthtmlcss

Silhouette as the backdrop image

There is a span element that I am using in the following way - <span class="tick"></span> This creates a decorative "tick" for a checkbox. The CSS code used for this is - input[type="checkbox"] + span > span.tick { display: block; ...

htmlcss