0

私はthead、tbodyなどの伝統的なテーブルを持っています。これはtablesorter.jsに必要です。

私が持っているもの：

<div id="tableWrapper">
  <div id="tableContainer" class="tableContainer">
    <table id="scrollTable">

      <thead class="fixedHeader">
        <tr class="tableHeader even">
          <th class="header">
            <span>Name</span>
          </th>
          <th class="header">
            <span>Address</span>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="tableRow">
          <td class="td_0">
            <span>
              Doe, John
            </span>
          </td>
          <td class="td_0">
            <span>
              Memory Lane
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS：

#tableWrapper tbody{
  color:#00467f;
  font-weight:500;
  position:absolute;
  overflow-y: auto;
  overflow-x: scroll;
  height:300px;
  width:300px;
}

#tableWrapper #tableContainer{
  width: 1100px;
  overflow: hidden;
}

#tableWrapper tbody>tr{
  width: 1200px;
}

テーブルヘッダーセクションを垂直方向に固定しているので、テーブルヘッダーをtbody垂直スクロールイベントの外側に保持するには、tbodyの位置が絶対的です。tbody> trの幅をtbodyよりも高い値に設定してみましたが、うまくいきませんでした。

tbody> tr幅は、自動的にtbodyのサイズに縮小されます。

問題：テーブル全体を水平方向にスクロールせずにtbody水平スクロールバーをスクロールさせることはできません（したがって、垂直スクロールバーはoverflow：hiddenに表示されなくなります）。tbodyを水平方向にスクロールしたいのですが、そのイベントをヘッダーにバインドするためのjqueryがあります。だから問題はありません。水平スクロールバーをtbodyのみでスクロールさせようとしているだけです。

tbodyのoverflow-y：autoを機能させることはできますが、overflow-x：autoを機能させることはできません。tbodyを左右にスクロールさせるためにtrを広くする方法はありますか？もしそうなら、どのように？

4

1 に答える 1

1

ああ、私はそれを理解しました。

float：left;を追加しました。そしてdisplay：block totbody>tr。

CSS：

 #tableWrapper tbody>tr{
  display:block;
  float:left;
   width: 1200px; /*desired width*/ 
  }
于 2013-02-14T16:52:02.470 に答える