Jak zamrozić pierwszą i ostatnią kolumnę tabeli html w przewijalnym div?

Czy mogę zaproponować nieco niekonwencjonalne rozwiązanie?

Co sądzisz o umieszczeniu kolumny 'total' po kolumnie' name', a nie na samym końcu? Czy nie uniknie to wymogu przewijania tylko części tabeli?

To nie jest dokładnie to, o co prosisz, ale być może jest to wystarczające rozwiązanie, biorąc pod uwagę, że alternatywa byłaby dość niechlujna. (Np. umieszczenie kolumn "total" I "name" poza tabelą spowoduje wyrównanie problemy, gdy nie wszystkie rzędy są jednakowej wysokości. Możesz to poprawić za pomocą javascript, ale wtedy wkraczasz w zupełnie nowy świat bólu).

Również z punktu widzenia interfejsu użytkownika, może być tak, że "nazwa" i "suma" są najważniejszymi danymi, w którym to przypadku sensowne byłoby złożenie ich razem, a następnie rodzaj "podziału" sumy. Oczywiście, wydaje się, że mamy intuicję, że "suma" powinna pochodzić po jego częściach składowych, ale nie sądzę, że spowodowałoby to zbyt wiele zamieszania dla użytkownik, jeśli zamówienie zostało odwrócone w ten sposób (choć jest to pytanie dla Ciebie, na podstawie produktu i użytkowników).

W każdym razie, coś do rozważenia.

EDIT:

Oto kilka bardziej niekonwencjonalnych rozwiązań, teraz, gdy myślę, że rozumiem twoje intencje nieco lepiej:

1. pogrupuj wyniki. Podaj ostatnie dziesięć, powiedzmy, i całość, i link do starszych punktów, które są przyznawane po 10 na raz
2. podaj tylko nazwy, sumy i inne znaczące środki takich jak średnia i sd, a następnie zapewnić link do każdej nazwy, która pokazuje wszystkie wyniki odpowiadające temu nazwisko. Możesz wtedy również zapewnić link pokazujący wszystkie wyniki dla a biorąc pod uwagę zestaw punktów, tak aby porównania między różnymi użytkownikami można zrobić. Chodzi o to, że wystarczy podać 1 wymiar danych dla każdego widoku, a nie posiadanie nieporęcznego zestawu danych 2D
3. aby wiersze sortowalne (łatwe z jQuery UI) tak, że jeśli chcę porównaj Mary z Jane, mogę ciągnąć i umieść jeden po drugim, więc nie będę trzeba przewijać w lewo i prawo do sprawdzenia, które wyniki odpowiadają do których nazw
4. Podświetl wiersz po kliknięciu, zmieniając tło kolor lub podobne, ponownie, więc nie muszę przewijać w lewo iw prawo.

W każdym razie masz pomysł. Być może lepiej jest szukać rozwiązania interfejsu użytkownika niż wypaczonego rozwiązania znaczników. Ostatecznie zastanawiałbym się, jak ważne jest, aby przedstawić tak wiele danych do użytkownik od razu, że jego część musi przewijać w określony sposób, aby dane były czytelne. Być może budujesz aplikację arkusza kalkulacyjnego i naprawdę musisz wyświetlić matrycę 100x100 w jednym widoku. Jeśli nie, z pewnością możesz wymyślić bardziej kreatywne sposoby, niż muszę podzielić wyniki.

Spójrz na ten plugin jQuery:

Http://fixedheadertable.com/

Nie jest teraz kompletny (tylko wyśmiałem go bardzo szybko), ale oto sposób na zrobienie tego za pomocą prostego HTML. Chcesz trzy stoliki ... dwa Na Zewnątrz

  <table style="float: left;">
     <tr>
        <td>Name</td>
     </tr>
     <tr>
        <td>John</td>
     </tr>
     <tr>
        <td>Will</td>
     </tr>
  </table>
  <div id="tableWrapper" style="overflow-x: auto; width: 500px;float:left;padding-bottom: 10px;">
      <table>
        <tr>
           <td>Score1</td>
           <td>Score2</td>
           ...
        </tr>
        <tr>
           <td>5</td>
           <td>6</td>
           ...
        </tr>
        <tr>
           <td>3</td>
           <td>7</td>
           ...
        </tr>
        <tr>
           <td>7</td>
           <td>1</td>
           ...
        </tr>
      </table>
  </div>
  <table style="float: left;">
     <tr>
        <td>Total</td>
     </tr>
     <tr>
        <td>86</td>
     </tr>
     <tr>
        <td>82</td>
     </tr>
  </table>

Zakładam, że chcesz przewijać tylko w poziomie. W przeciwnym razie mogłoby to być mylące z kolumnami statycznymi.

Można umieścić overflow: auto na elemencie zawierającym tylko wewnętrzne komórki tabeli... Nie jestem pewien, jak przeglądarki poradziłyby sobie z tym, ale być może będziesz w stanie umieścić elementy, które chcesz naprawić wewnątrz elementów thead i tfoot, i umieścić część przewijania wewnątrz elementu tbody i ustawić jego przepełnienie na auto.

W przeciwnym razie może być konieczne porzucenie semantyki i kodu lewa kolumna i prawa kolumna poza tabelą.

Osobiście spróbowałbym zakodować go tak semantycznie, jak to możliwe, a następnie użyć JavaScript, aby ustawić lewą i prawą kolumnę. Bez JavaScript, powinieneś sprawić, że nie uda się to tylko szerokiej tabeli (Nie wiem, jak trudne byłoby to, jak mówisz, że masz stałą szerokość)

Możesz spróbować tego (przybliżonego) przykładu jQuery, aby umieścić wartości pierwszej kolumny na zewnątrz.

var nameTable = '<table id="outside-name-col">
                  <thead>
                   <tr>
                    <th>Name</th>
                   </tr>
                  </thead>
                 <tbody>'; // start making a table for name column only

$('#scoreTable tbody tr').each(function() { // iterate through existing table

   var nameCol = $(this).find(':first'); // get column of index 0, i.e. first

   var cellHeight = nameCol.height(); // get the height of this cell

   $(this).find('td').height(cellHeight); // equalise the height across the row so removing this element will not collapse the height if it is taller than the scores and total       

   nameTable += '<tr><td style="height: ' + cellHeight + 'px">' + nameCol.html() + '</td></tr>'; // append the next row with new height and data

   nameCol.remove(); // remove this cell from the table now it's been placed outside

});

nameTable += '</tbody></table>'; // finish table string


$('#scoreTable').before(nameTable); // insert just before the score table

Użyj CSS, aby ustawić je poprawnie. To jest nieprzetestowane, ale powinno dać ci jakiś pomysł.

Czy chodziło Ci o przewijanie poziome??

Jeśli chcesz osiągnąć poziome przewijanie, możesz użyć 3 kontenerów.

1. dla pierwszej kolumny (Nazwa)
2. dla kolumn, które chcesz przewijać. Ustawia styl overflow-x tego kontenera na auto
3. dla ostatniej kolumny (razem)

Przewijanie zawartości tabel jest problematycznym problemem, ponieważ nie ma prostego i bezpiecznego dla przeglądarki rozwiązania, aby to osiągnąć.

Najlepszy i najbezpieczniejszy sposób to zrobić wymaga JavaScript. Można osiągnąć nawet poziome przewijanie łatwo (jest dołączony za darmo) z tej techniki użyłem. Możesz łatwo przekształcić to w swój problem:

1) zrobiłem 3 tabele

2) umieszczono środkową tabelę, która przechowuje dane w kontenerze DIV

3) Ustaw styl DIV na overflow: auto

4) dał nagłówek i stopkę tabeli i div każdy Szerokość 100%

5) otoczony wszystko przez inny div do kontroli ogólnej szerokości tabeli

6) upewnił się, że ilość kolumn jest zgodna we wszystkich trzech tabelach i że wszystkie trzy mają te same style dotyczące paddingów, marginesów i obramowań

Teraz ciekawa część:

6) poniżej ostatniego elementu konstrukcji tabeli, napisz blok javascript (lub dołącz go z plik)

7) napisz funkcję, która kolejno patrzy na każdą kolumnę (użyj pętli for), zaczynając od pierwszej. Przy każdej iteracji tej pętli sprawdź komórkę td z dwóch pierwszych tabel w bieżącej kolumnie. Sprawdź, które z jest większe i przypisz to do stylu mniejszej komórki td. Możesz również zastosować tę wartość do tabeli stopki.

8) wywołaj tę funkcję. Możesz to zrobić w interwale lub gdy wystąpią specjalne zdarzenia, takie jak nowe dane w komórki (jeśli używa się na przykład ajax).

Uwaga: Jeśli przewijasz poziomo, rozmiary kolumn są zsynchronizowane. Ale będziesz musiał zsynchronizować pozycję przewijania tabeli nagłówka i stopki z tabelą treści. Alternatywnie po prostu pozwól ogólnemu div przewijać całość w poziomie, ale nie w pionie. To byłoby zadanie DIV, który zawiera tabelę danych.

Ta technika działała bardzo dobrze we wszystkich głównych przeglądarkach na bardzo coplex diagramie Gantta projekt.

Uwaga: możesz łatwo myśleć o tej koncepcji w sposób obracany o 90 stopni, dzięki czemu naprawisz pierwszą i ostatnią kolumnę nagłówka podczas przewijania.

Edit: oto kolejny przykład z mojej bazy kodu, który może pomóc Ci znaleźć rozwiązanie:

var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
    var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
    var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;

    left_td.style.width = left_td_width + "px";
    right_td.style.width = right_td_width + "px";
}, 25);

Ten kod wykonuje następujące czynności: upewnia się, że Tabela z 3 kolumnami zawsze wygląda tak: pierwsza i ostatnia kolumna mają ten sam rozmiar, a środkowa kolumna ma szerokość 120 pikseli. Oczywiście, że nie ma zastosowania bezpośrednio do twojego specjalnego problemu, ale może to dać ci punkt wyjścia w dynamicznej manipulacji tabelą za pomocą JavaScript.