Đổi kích thước ô bảng bằng cách sử dụng thay đổi kích thước css: cả hai; không làm việc với bảng

Question

Thay đổi kích thước một ô trong bảng sử dụng css {thay đổi kích thước: both;} không làm việc với bảng

tôi cần phải thay đổi kích thước bảng và di động của nó, thay đổi kích thước có thể sử dụng css, css {thay đổi kích thước: both;} đang làm việc trong div nhưng không có trong bảng thẻ

<table border="1" style="resize:both;"> 
<tr> 
<td>hi table</td> 
<td>hi div</td> 
</tr> 
<tr> 
<td>hi table</td> 
<td>hi div</td> 
</tr> 
<tr> 
<td>hi table</td> 
<td>hi div</td> 
</tr> 
</table> 

có thể bất kỳ sự giúp đỡ cơ thể

Answer 1

Có vẻ như thay đổi kích thước: không áp dụng cho bảng.

table { 
    border:2px solid; 
    padding:10px 40px; 
    width:300px; 
    resize:both; 
    overflow:auto; 
}​ 

http://jsfiddle.net/Kyle_/q4qwp/

Nhưng bạn có thể quấn bảng trong một div và thiết lập các thay đổi kích thước: để div thay vào đó, nhưng bạn không thể co lại bàn ngay cả với% giá trị chiều rộng.

http://jsfiddle.net/Kyle_Sevenoaks/q4qwp/1/

Answer 2

bạn có thể sử dụng phong cách của div bên ngoài để thay đổi vị trí của bảng. Ví dụ:

<div style="resize:both"> 
    <table id="sample table"></table> 
</div> 

Answer 3

Để trang trải Chrome và Safari, sử dụng

th, td { resize: both; overflow: auto; } 

Đừng đặt chiều rộng ban đầu trên bàn như một toàn thể. Tuy nhiên, bạn có thể đặt độ rộng của ô hoặc cột.

Để trang trải Firefox, tôi e rằng bạn sẽ cần phải quấn nội dung của mỗi ô trên div với một lớp và thêm bộ chọn lớp tương ứng vào quy tắc ở trên. Và điều này sẽ giới thiệu hai thay đổi kích thước xử lý trên Chrome và Safari trong mỗi tế bào ... như vậy có lẽ bạn nên sử dụng

<td><div class=cell>...</div></td> 

cho mỗi tế bào và các quy tắc CSS

.cell { resize: both; overflow: auto; width: 100%; height: 100%; } 

(mà không làm thay đổi kích thước td yếu tố) .

Bằng cách này, tất cả các ô có thể thay đổi kích thước, do đó toàn bộ bảng có thể thay đổi kích thước gián tiếp (miễn là bạn không đặt chiều rộng và chiều cao).

Về nguyên tắc, resize áp dụng cho tất cả các thành phần có thuộc tính overflow không phải là visible. Trong thực tế, nó hoạt động theo một cách hạn chế hơn và khác nhau trong các trình duyệt khác nhau.

Answer 4

Để đổi kích thước bảng và cột bảng, bạn phải sử dụng Javascript. Có một số plugin jQuery hiện có làm như vậy, ví dụ: colResizable, cho phép bạn kéo neo cột theo cách thủ công.

Đây là một đoạn mã nhỏ:

$("#tabe").colResizable({}); 

bạn có thể tìm thêm ví dụ về: http://www.bacubacu.com/colresizable/ hoặc bạn có thể thử fiddle này: http://jsfiddle.net/euka4rm3/