2011-11-03 27 views
29

Dưới đây là vấn đề của tôi: Tôi có một bảng HTML trông như thế này:Dòng bảng HTML - Cách tạo ô duy nhất có chiều rộng 100%? (Với ảnh chụp màn hình lời giải thích)

HTML Table

Những gì tôi muốn là để có được một dòng của bảng thêm bên dưới nó, ngoại trừ hàng này kéo dài chiều rộng đầy đủ của bảng - nhưng với chỉ một ô. Tôi nhanh chóng chế nhạo lên một ví dụ:

table

Như bạn có thể thấy tôi thêm một Row Bảng dưới nó với một <td> tế bào đơn lẻ bên trong chứa văn bản. Tuy nhiên tôi muốn ô này trải rộng 100% chiều rộng của toàn bộ bảng - nó không được thay đổi kích thước chiều rộng của cột 'Tên'.

Điều đó có thể xảy ra không? Tôi rất vui khi sử dụng jQuery hoặc Javascript nếu cần - cũng vậy, điều này không cần phải làm việc trong IE vì mọi người dùng đều sử dụng Chrome (mặc dù đó sẽ là một perk).

Jack

Trả lời

59

Trong trường hợp của bạn, bạn muốn làm điều gì đó như

<tr> 
    <td colspan="5">This text should be as long as the entire table's width...</td> 
</tr> 

Thuộc tính colspan nói có bao nhiêu cột tế bào nên mất. Nó sẽ hoạt động trong tất cả các trình duyệt hỗ trợ các bảng, vì nó là HTML chuẩn.

Trong JavaScript, bạn đặt thuộc tính colSpan của ô hoặc gọi .setAttribute("colspan", the_number_of_columns) trên đó. Hoặc là nên làm việc. Nhưng trừ khi bạn đang tạo ô động, bạn chỉ nên bao gồm thuộc tính colspan trong HTML của mình.

+0

Perfect - cảm ơn bạn! Tôi đã không đi bất cứ nơi nào gần bàn sau khi nghe về hận thù chung của họ từ các nhà phát triển - cho đến bây giờ, khi tôi thực sự cần thiết để hiển thị dữ liệu bảng :-) – Jack

+4

Bàn của riêng mình không phải là điều ác. Họ thực sự khá tốt cho những gì họ đang làm cho. Nếu bạn từng nghe ai đó nói với bạn tất cả các bảng là xấu, bạn có thể khá tự tin rằng anh ta/cô ấy là một nhà văn hóa hàng hóa và không biết WTF họ đang thực sự nói. :) Đó là * các bảng bố cục * - sử dụng các bảng để định vị các công cụ, thay vì giữ dữ liệu dạng bảng - điều đó là điều ác. (Vẫn rất hiếm khi cần thiết, nhưng thậm chí là ác quỷ.) – cHao

13

Đối với một tế bào để span tất cả 5 cột,

<td colspan="5">Lorem Ipsum</td> 
+1

Cảm ơn bạn - điều đó đã làm được điều đó! – Jack

+2

Bạn đã nhập "Lorem" không chính xác: D –

Các vấn đề liên quan