it-swarm.com.de

Bildlaufleiste zum Tabellenkörper hinzufügen

Ich möchte dies so einfach wie möglich ohne zusätzliche Bibliotheken tun.

In meiner sehr langen Tabelle möchte ich dem Tag <tbody> Eine Bildlaufleiste hinzufügen, damit der Kopf immer sichtbar ist, aber nicht funktioniert. können Sie bitte helfen.

geige: http://jsfiddle.net/Hpx4L/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
40
Hello-World

sie können den Inhalt des <tbody> in einen scrollbaren <div> einwickeln:

html

....
<tbody>
  <tr>
    <td colspan="2">
      <div class="scrollit">
        <table>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          ...

cSS

.scrollit {
    overflow:scroll;
    height:100px;
}

siehe meine jsfiddle, gegabelt von deiner: http://jsfiddle.net/VTNax/2/

63
braican

Diese Lösungen haben häufig Probleme mit der Ausrichtung der Kopfzeilenspalten an den Textspalten und funktionieren möglicherweise nicht ordnungsgemäß, wenn die Größe geändert wird. Ich weiß, dass Sie keine zusätzliche Bibliothek verwenden wollten, aber wenn Sie jQuery verwenden, ist diese wirklich klein. Es unterstützt feste Kopfzeilen, Fußzeilen, Spaltenübergreifendes (Colspan), horizontales Scrollen, Größenänderung und eine optionale Anzahl von Zeilen, die angezeigt werden sollen, bevor das Scrollen beginnt.

jQuery.scrollTableBody (GitHub)

Solange Sie eine Tabelle mit dem richtigen <thead>, <tbody> Und (optional) <tfoot> Haben, müssen Sie nur Folgendes tun:

$('table').scrollTableBody();
14
Noah Heldman

Dies liegt daran, dass Sie Ihr <tbody> - Tag vor <td> In die Tabelle einfügen und keine Daten ohne <td> Drucken können.

Also musst du dafür einen <div> Sagen #header Mit position: fixed;

 header
 {
      position: fixed;
 }

mache einen anderen <div>, der als <tbody> fungiert

tbody
{
    overflow:scroll;
}

Jetzt ist Ihr Header fixiert und der Body wird gescrollt. Und der Header wird dort bleiben.

7
Veer Shrivastav