冻结的列未与可滚动列对齐（HTML + CSS）

Question

我打算这样做：

  

左侧柱---＆gt;冷冻

     

右侧柱---＆gt;滚动

我目前面临的问题是只有<td>部分被冻结。并且<th>对代码没有影响。我无法弄清楚如何解决这个问题？任何帮助将非常感激。 提前谢谢。

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代码：

.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;
}

Answer 1

添加了一些修复程序。希望这能让你开始。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;