Question

我创建了一个表格，允许我滚动右侧的无限列，左侧两列使用position：absolute锁定到位。单击列上的链接会为该列提供.locked类，并从列＃2中删除相同的类，基本上将它们交换。

Jquery的：

function lockThis(n) {
    if (n != lockedCol) {
        $("#test tr td").removeClass('locked');
        $("#test tr td .lockLink").addClass("glyphicon-circle-arrow-left");
        $("#test tr td:nth-child(" + n + ")").addClass('locked');
        $("#test tr td:nth-child(" + n + ") .lockLink").removeClass("glyphicon-circle-arrow-left");
        lockedCol = n;
   }
}

lockedCol = 0;
lockThis(2);

的CSS：

 td {
   border-style: solid;
   border-width: 1px 0;
   font-size: 1.1em;
   padding: 5px;
 }

 #test tr td:nth-child(1) {
   position: absolute;
   left: 0;
   top: auto;
   width: 90px;
   min-width: 90px;
   z-index: 3;
 }

 #test tr td:nth-child(n+2) {
   min-width: 110px;
 }

 #test tr td:nth-child(2) {
   background: #ffccdd;
 }

 #test tr td:nth-child(3) {
   background: #ffddcc;
 }

 #test tr td:nth-child(4) {
   background: #ffeebb;
 }

 #test tr td:nth-child(5) {
   background: #aaffbb;
 }

 #test tr td:nth-child(6) {
   background: #ccddff;
 }

 #test tr td:nth-child(7) {
   background: #aabbff;
 }

 #test tr td:nth-child(8) {
   background: #bbaaff;
 }

 #test tr td.locked {
   position: absolute;
   left: 90px;
   top: auto;
   width: 100px;
 }

 #test {
   border-collapse: collapse;
   // border-top: 3px solid #0099ff;
   table-layout: fixed
 }

 .tableHolder {
   width: 110px;
   overflow-x: scroll;
   margin-left: 200px;
   overflow-y: visible;
   padding-bottom: 1px;
 }

 @media (max-width: 439px) {
   #compareTableBox {
     width: 312px
   }
 }

 @media (min-width: 440px) {
   .tableHolder {
     width: 220px;
   }
   #compareTableBox {
     width: 422px
   }
 }

 @media (min-width: 550px) {
   .tableHolder {
     width: 330px;
   }
   #compareTableBox {
     width: 532px
   }
 }

 @media (min-width: 660px) {
   .tableHolder {
     width: 440px;
   }
   #compareTableBox {
     width: 642px
   }
 }

 #compareTableBox {
   position: relative;
   margin: auto;
   border: 1px solid black;
 }

HTML

<body>

  <div id="compareTableBox">

    <div class="tableHolder">
      <table id="test">
        <tr>
          <td class="leftCol">Features</td>
          <td class="contentCol"><span onclick="lockThis(2)" class="lockLink glyphicon"></span> Red</td>
          <td class="contentCol"><span onclick="lockThis(3)" class="lockLink glyphicon"></span> Orange</td>
          <td class="contentCol"><span onclick="lockThis(4)" class="lockLink glyphicon"></span> Yellow</td>
          <td class="contentCol"><span onclick="lockThis(5)" class="lockLink glyphicon"></span> Green</td>
          <td class="contentCol"><span onclick="lockThis(6)" class="lockLink glyphicon"></span> Blue</td>
          <td class="contentCol"><span onclick="lockThis(7)" class="lockLink glyphicon"></span> Indigo</td>
          <td class="contentCol"><span onclick="lockThis(8)" class="lockLink glyphicon"></span> Violet</td>
        </tr>
        <tr>
          <td class="leftCol">Bits</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
        </tr>
        <tr>
          <td class="leftCol">Pieces</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">yes</td>
        </tr>
        <tr>
          <td class="leftCol">Odds</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">yes</td>
          <td class="contentCol">no</td>
          <td class="contentCol">no</td>
          <td class="contentCol">yes</td>
        </tr>
        <tr>
          <td class="leftCol">Sods</td>
          <td class="contentCol">12</td>
          <td class="contentCol">12</td>
          <td class="contentCol">24</td>
          <td class="contentCol">3</td>
          <td class="contentCol">12</td>
          <td class="contentCol">24</td>
          <td class="contentCol">3</td>
        </tr>

      </table>
    </div>
  </div>


</body>

https://jsfiddle.net/75audqcf/13/

这很好用，直到我在表格单元格中有不同的高度。然后就打破了。左边的单元格不会保持高度，使用绝对移动列似乎会阻止该列影响表的其余部分。用大量文本填充一个单元格就可以了。

https://jsfiddle.net/75audqcf/14/

有人可以提出解决方法吗？这将用于可变内容，因此我无法对高度进行硬编码，我需要保持宽度固定，以便在320px宽屏幕上始终可以看到两个彩色列。

Answer 1

因为你已经拥抱了侧面滚动，所以甚至不要让文本换行导致那个时髦的换行符，将它添加到你的CSS中：

td {
    white-space: nowrap;
}

<强> [编辑]

#test tr td:nth-child(1) {
    height: 100%;
    border-bottom: none;}

#test tr td.locked {
    height: 100%;}

#compareTableBox {
    overflow-y:hidden;}

td {
    vertical-align:top;}

使用position移动表列：绝对打破一致的行高

1 个答案: