Có vẻ như tôi đã nghe / đọc ở đâu đó rằng <div>bên trong của một <td>là không. Không phải là nó không hoạt động, chỉ là một cái gì đó về chúng không thực sự tương thích dựa trên loại màn hình của chúng. Không thể tìm thấy bất kỳ bằng chứng nào để sao lưu linh cảm của tôi, vì vậy tôi có thể hoàn toàn sai.
Câu trả lời:
Sử dụng một divinstide a tdkhông tệ hơn bất kỳ cách sử dụng bảng nào khác để bố trí. (Một số người không bao giờ sử dụng bảng để bố trí và tôi tình cờ là một trong số họ.)
Nếu bạn sử dụng một divtrong tdbạn sẽ tuy nhiên nhận được trong một tình huống mà nó có thể là khó dự đoán như thế nào các yếu tố sẽ được kích thước. Mặc định cho div là để xác định chiều rộng của nó từ cha của nó và mặc định cho một ô của bảng là để xác định kích thước của nó tùy thuộc vào kích thước của nội dung của nó.
Các quy tắc về cách divkích thước nên được xác định rõ trong các tiêu chuẩn, nhưng các quy tắc về cách tdkích thước nên không được xác định rõ, do đó các trình duyệt khác nhau sử dụng các thuật toán hơi khác nhau.
table-layout:fixedCSS không như bạn nghĩ. Nó giảm số lượng trình duyệt tính toán thực hiện khi kết xuất bảng bằng cách chỉ tính kích thước của hàng đầu tiên.
Sau khi kiểm tra XHTML DTD, tôi phát hiện ra rằng một phần mềm <TD> được phép chứa các thành phần khối như tiêu đề, danh sách và cả các phần tử <DIV>. Do đó, sử dụng phân vùng <DIV> bên trong phân vùng <TD> không vi phạm tiêu chuẩn XHTML. Tôi khá chắc chắn rằng các biến thể hiện đại khác của HTML có mô hình nội dung tương đương cho phân tầng <TD>.
Dưới đây là các quy tắc DTD có liên quan:
<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">Không nhất thiết.
Nếu bạn cần đặt DIV trong TD, hãy chắc chắn rằng bạn đang sử dụng TD đúng cách. Nếu bạn không quan tâm đến dữ liệu dạng bảng và ngữ nghĩa, thì cuối cùng bạn sẽ không quan tâm đến DIV trong TD. Tôi không nghĩ rằng có một vấn đề mặc dù - nếu bạn phải làm điều đó, bạn ổn.
Theo đặc tả kỹ thuật HTML
A <div>có thể được đặt trong đó nội dung luồng được mong đợi 1 , đó là <td>mô hình nội dung 2 .
Một ô bảng có thể chứa các phần tử mức khối một cách hợp pháp, do đó, về bản chất nó không phải là giả. Tất nhiên, hàm ý trình duyệt để lại vị trí lý thuyết đầu cơ này. Nó có thể gây ra vấn đề bố trí và lỗi.
Mặc dù các bảng được sử dụng để bố trí - và đôi khi vẫn vậy- Tôi tưởng tượng rằng hầu hết các trình duyệt sẽ hiển thị nội dung chính xác. Ngay cả IE.
Nếu bạn muốn sử dụng vị trí: tuyệt đối; trên div với position: relative;trên td bạn sẽ gặp vấn đề. FF, safari và chrome (mac, không phải PC) sẽ không định vị div tương đối với td (như bạn mong đợi) điều này cũng đúng với div display: table-whatever;vì vậy nếu bạn muốn làm điều đó thì bạn cần hai div, một cho container width: 100%; height: 100%;và không có đường viền để nó lấp đầy td mà không có bất kỳ tác động trực quan nào. và sau đó là một trong những tuyệt đối.
khác hơn tại sao không chỉ phân chia tế bào?
Như mọi người đã đề cập, nó có thể không phải là một ý tưởng tốt cho mục đích bố trí. Tôi đã đến câu hỏi này bởi vì tôi đã tự hỏi tương tự và tôi chỉ muốn biết nếu nó sẽ là mã hợp lệ.
Vì nó hợp lệ, bạn có thể sử dụng nó cho các mục đích khác. Ví dụ, những gì tôi sẽ sử dụng nó là đặt một số div "CSSed" ưa thích bên trong các hàng của bảng và sau đó sử dụng hàm jQuery nhanh để cho phép người dùng sắp xếp thông tin theo giá, tên, v.v. Cách này, chỉ bảng bố cục sẽ cho tôi là "thứ tự dọc", nhưng tôi sẽ kiểm soát chiều rộng, chiều cao, nền, v.v. của div bằng CSS.
Hai cách đối phó với nó
divbên trongtbodydivbên trongtrCả hai cách tiếp cận đều hợp lệ, nếu bạn thấy feference: https://stackoverflow.com/a/23440419/2305243
Nó phá vỡ ngữ nghĩa , đó là tất cả. Nó hoạt động tốt, nhưng có thể có trình đọc màn hình hoặc thứ gì đó không được xử lý HTML của bạn nếu bạn "phá vỡ ngữ nghĩa".