Jak zmienić rozmiar kolumn tabeli html?

Question

Mam dość standardowy styl bootstrap w stylu <table>. Chcę zmienić rozmiar kolumn tej tabeli, np. poprzez kliknięcie i przeciągnięcie prawej krawędzi elementu <th>. Nie mogę używać żadnych wtyczek jQuery, ponieważ używam Angular i zależność jQuery jest nie do zaakceptowania.

Myślałem, że gdybym mógł złapać zdarzenie click/mousemove na prawej granicy elementu <th>, mógłbym zaimplementować własną logikę zmiany rozmiaru (monitorować ruch myszy w poziomie i odpowiednio dostosować szerokość), ale nie wiem jak można tego dokonać (nie ma czegoś takiego jak zdarzenie związane z granicami elementów, o ile wiem).

Jaki jest najlepszy sposób zmiany rozmiaru kolumn przez użytkownika? Bez jQuery (i najlepiej - w kontekście Angular 2).

Answer 1

Prawdopodobnie komplikujesz sytuację, jeśli chcesz zaimplementować to samodzielnie.

ag-grd to doskonały biblioteka siatki kątowego 2, który obsługuje wszystkie oczekiwane działania stołowe (re-size, re-order etc ...)

można użyć zwykły javascript wersji lub AG-siatkę kątowa 2 komponent z „ag-grid ag-grid-ng2

jest Przedsiębiorstwo klasy Javascript danych siatki. Celem ag-grid jest dostarczenie siatki danych, oprogramowanie dla przedsiębiorstw można użyć do zastosowań budowlanych, takich jak raportowanie i danych analitycznych, biznesu przepływ pracy i wprowadzanie danych "

Answer 2

resize nieruchomość nie działać z tabeli, to dlaczego trzeba umieścić div wewnątrz tabeli th i td, a następnie zmienić jego rozmiar, spróbuj poniżej snippet

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
} 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
    margin: 0px; 
 
    overflow: auto; 
 
} 
 

 
div { 
 
    resize: both; 
 
    overflow: auto; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid black; 
 
    display:block; 
 

 
} 
 

 
td div { 
 
    border: 0; 
 
    width: auto; 
 
    height: auto; 
 
    min-height: 20px; 
 
    min-width: 20px; 
 
}

<table> 
 
    <tr> 
 
    <td><div>one</div></td> 
 
    <td><div>two</div></td> 
 
    <td><div>three</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div>four</div></td> 
 
    <td><div>five</div></td> 
 
    <td><div>six</div></td>   
 
    </tr> 
 
    <tr> 
 
    <td><div>seven</div></td> 
 
    <td><div>eight</div></td> 
 
    <td><div>nine</div></td>  
 
    </tr> 
 
</table>

Answer 3

nie uwagi. Zamiast tego użyj bootstrap. Pozwól programowi bootstrap decydować o zmianie rozmiaru dla użytkowników końcowych.
- Zmiana rozmiaru kolumn nie działa dobrze na urządzeniach. - Możesz zostać zmuszony do zapamiętania szerokości kolumny w serwerze lub przeglądarce, co może zaowocować dużą ilością pracy. Czy to się skończy? Czy kolumny powinny zostać zmienione? Czy należy je usuwać? Lepiej dokonać wyboru projektu, niż odłożyć wszystko z powrotem do użytkownika końcowego.