Question

这是我在这里发表的第一篇文章，所以我希望我的帖子一切顺利：）

我找到了一张粘有第一列的桌子。它的prety好，但有一点虫子。如果任何细胞大于粘性细胞，则另一个细胞将具有相同的高度。

我尝试设置相对于父级的位置并将粘性单元格高度设置为100％，但我将得到所有表的100％，而不是100％的tr高度

＆＃13;

.zui-table {
  border: none;
  border-right: solid 1px #DDEFEF;
  border-collapse: separate;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
}

.zui-table thead th {
  background-color: #DDEFEF;
  border: none;
  color: #336B6B;
  padding: 10px;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
  white-space: nowrap;
}

.zui-table tbody td {
  border: solid 1px #DDEFEF;
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
  white-space: nowrap;
}

.zui-wrapper {
  position: relative;
}

.zui-scroller {
  margin-left: 141px;
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 5px;
  width: 300px;
}

.zui-table .zui-sticky-col {
  border-left: solid 1px #DDEFEF;
  border-right: solid 1px #DDEFEF;
  left: 0;
  position: absolute;
  top: auto;
  width: 120px;
}

＆＃13;

<div class="zui-wrapper">
  <div class="zui-scroller">
    <table class="zui-table">
      <thead>
        <tr>
          <th class="zui-sticky-col">Name</th>
          <th>Number</th>
          <th>Position</th>
          <th>Height</th>
          <th>Born</th>
          <th>Salary</th>
          <th>Prior to NBA/Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="zui-sticky-col">DeMarcus Cousins</td>
          <td>15</td>
          <td>C</td>
          <td>6'11"</td>
          <td>08-13-1990</td>
          <td>$4,917,000</td>
          <td>Kentucky/USA</td>
        </tr>
        <tr style="position:relative">
          <td class="zui-sticky-col">Isaiah Thomas</td>
          <td>22</td>
          <td>PG</td>
          <td>5'9"</td>
          <td>02-07-1989</td>
          <td>
            <ul class="list-product-attributes">

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

              <li>
                <span id="spanxx" rel="tooltip" data-toggle="tooltip" title="INFO">INFO</span>
              </li>

            </ul>
          </td>
          <td>Washington/USA</td>
        </tr>
        <tr>
          <td class="zui-sticky-col">Ben McLemore</td>
          <td>16</td>
          <td>SG</td>
          <td>6'5"</td>
          <td>02-11-1993</td>
          <td>$2,895,960</td>
          <td>Kansas/USA</td>
        </tr>
        <tr>
          <td class="zui-sticky-col">Marcus Thornton</td>
          <td>23</td>
          <td>SG</td>
          <td>6'4"</td>
          <td>05-05-1987</td>
          <td>$7,000,000</td>
          <td>Louisiana State/USA</td>
        </tr>
        <tr>
          <td class="zui-sticky-col">Jason Thompson</td>
          <td>34</td>
          <td>PF</td>
          <td>6'11"</td>
          <td>06-21-1986</td>
          <td>$3,001,000</td>
          <td>Rider/USA</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

https://jsfiddle.net/vcj2enw6/

Answer 1

这不是一个错误。它也是正确的。假设对于一行，存在具有大量数据的列。如果所有的细胞都不会生长，那么这个细胞就不会有任何均匀性。因此，这是一种正确的行为。与您的代码相对应，如果所有专栏都是以赛亚托马斯＆＃39;不长大然后看起来会像这样： - click here

带有棒柱的表需要100％的父母宽度

1 个答案: