CODEWITHSUNDEEP
htmlcss
mindfreak
mindfreak

Reputation: 455

Frozen columns not aligned with scrollable columns (HTML+CSS)

I intend to do this:

Left Side Column ---> Frozen

Right Side Column ---> Scrollable

The problem that I'm facing currently is that only <td> part is getting frozen. and the <th> has no effect of the code. I couldn't figure out how to get this fixed? Any help would be much appreciated. Thanks in advance.

HTML code:

<div class="padding-right-5 max_width_300 margin_bottom_30">
    <div class="innerDiv">
        <table id="fix_table" >
            <tr>
                <th class="height_26"></th>
            </tr>    

            <tr>
                <th class="header long"><h3>Sheet</h3></th>
                <th class="header"><h3>Part Type</h3></th>
                <th class="header"><h3>Options</h3></th>
                <th class="header"><h3>Customer</h3></th>
                <th class="header"><h3>Code</h3></th>
        <th class="header"><h3>Address</h3></th>
            </tr>
      <tr>
          <td class="row-content headcol"><h3>ABC01</h3></td>
          <td class="row-content"><h3>QQQ</h3></td>
          <td class="row-content" style="min-width:150px;">
            <h3>POP with camera 
            With primer - cam 
            Alt of 'WS with camera' 
            Mobileye 
            Alt of 'QPS with camera'</h3>
          </td>
          <td class="row-content">
            <h3>Renault</h3>
          </td>
          <td class="row-content">
            <h3>Xcent</h3>
          </td>
          <td class="row-content">
            <h3>Canada</h3>
          </td>
        <tr>      
        </table>
    </div>
</div>

CSS code: 

.padding-right-5 {
    padding-right: px;
}

.max_width_300 {
    max_width : 300px;
}

.margin_bottom_30 {
    margin-bottom:30px;
}
.innerDiv {
    overflow-x : scroll;   
    height: 300px;
    overflow-y: visible;
    padding: 0;
}
.header {
    border :1px solid;
    min-width: 100px;
    height: 75px;
    background-color: #C4C4C4;
}

.row-content {
    min-width: 100px;
    min-height: 100px;
    vertical-align: middle;
    height: 50px;
    border: 1px solid;
    height: 57px;
}
.headcol {
    position: absolute;   
}

#fix_table{ 
  border-collapse: separate;
  border-spacing: 0;

}

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

Upvotes: 0

Views: 122

Answers (1)

Aslam
Aslam

Reputation: 9672

Added few fixes. Hope this will get you started.

.padding-right-5 {
    padding-right: 5px;
}

.max_width_300 {
    max-width : 300px;
}
.long{
  position: absolute; /* added this */
}
.margin_bottom_30 {
    margin-bottom:30px;
}
.innerDiv {
    overflow-x : scroll;   
    height: 300px;
    overflow-y: visible;
    padding: 0;
}
.header {
    border :1px solid;
    min-width: 100px;
    height: 75px;
    background-color: #C4C4C4;
}

.row-content {
    min-width: 100px;
    min-height: 100px;
    vertical-align: middle;
    height: 50px;
    border: 1px solid;
    height: 57px;
}
.headcol {
    position: absolute;   
  background: #fff; /*added this */
}

#fix_table{ 
  border-collapse: separate;
  border-spacing: 0;

}

td, th {
  margin: 0; 
  white-space: nowrap;
  border-top-width: 0px;
}
<div class="padding-right-5 max_width_300 margin_bottom_30">
  <div class="innerDiv">
    <table id="fix_table">
      <tr>
        <th class="height_26"></th>
      </tr>

      <tr>
        <th class="header long">
          <h3>Sheet</h3></th>
        <th class="header">
          <h3>Part Type</h3></th>
        <th class="header">
          <h3>Options</h3></th>
        <th class="header">
          <h3>Customer</h3></th>
        <th class="header">
          <h3>Code</h3></th>
        <th class="header">
          <h3>Address</h3></th>
      </tr>
      <tr>
        <td class="row-content headcol">
          <h3>ABC01</h3></td>
        <td class="row-content">
          <h3>QQQ</h3></td>
        <td class="row-content" style="min-width:150px;">
          <h3>POP with camera 
            With primer - cam 
            Alt of 'WS with camera' 
            Mobileye 
            Alt of 'QPS with camera'</h3>
        </td>
        <td class="row-content">
          <h3>Renault</h3>
        </td>
        <td class="row-content">
          <h3>Xcent</h3>
        </td>
        <td class="row-content">
          <h3>Canada</h3>
        </td>
        <tr>
    </table>
  </div>
</div>

Upvotes: 1

Related Questions