Liefern horizontale scrollen für die Tabelle 'tbody'

Habe ich eine traditionelle Tabelle mit thead, tbody,etc. Dies ist notwendig für tablesorter.js.

Was ich habe:

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

Führe ich die Kopfzeile der Tabelle in Abschnitt vertikal fixiert, so tbody Lage ist absolut zu halten in der Kopfzeile der Tabelle außerhalb des tbody vertikale scroll-Ereignis. Ich habe versucht, die Breite des tbody>tr zu etwas höherem als dem tbody, aber kein Glück.

Den tbody>tr Breite werden automatisch verkleinert, um die Größe der tbody.

Problem: ich kann nicht tbody horizontale Bildlaufleiste, um einen Bildlauf ohne horizontal scrollen der ganzen Tabelle (und damit der vertikale Scrollbalken verschwindet in die overflow:hidden). Ich möchte nur scrollen tbody horizontal und dann habe ich einige jquery binden Sie das Ereignis, um den header. Also kein Problem dort. Nur versuchen, um die horizontale Bildlaufleiste, um einen Bildlauf für tbody nur.

Ich bin in der Lage, um die tbody overflow-y:auto arbeiten, aber nicht, overflow-x:auto. Gibt es eine Möglichkeit, um die tr breiter, um die tbody, um nach Links und rechts scrollen? Wenn ja, wie?

InformationsquelleAutor Rayshawn | 2013-02-14
Schreibe einen Kommentar