DIV ใน TD เป็นความคิดที่ไม่ดีหรือไม่?

ดูเหมือนว่าฉันได้ยิน / อ่านที่ไหนซักแห่งว่า<div>ภายใน<td>นั้นไม่มีอะไรเลย ไม่ใช่ว่ามันจะไม่ทำงานบางอย่างเกี่ยวกับพวกเขาที่ไม่เข้ากันได้กับประเภทการแสดงผลของพวกเขา ไม่พบหลักฐานใด ๆ ที่จะสำรองลางสังหรณ์ของฉันดังนั้นฉันอาจผิดทั้งหมด

การใช้divinstide a tdนั้นไม่ได้เลวร้ายไปกว่าวิธีอื่น ๆ ในการใช้ตารางสำหรับการจัดวาง (บางคนไม่เคยใช้ตารางสำหรับการจัดวาง แต่ฉันก็เป็นหนึ่งในนั้น)

หากคุณใช้ a divในtdคุณจะได้รับในสถานการณ์ที่มันอาจจะยากที่จะทำนายว่าองค์ประกอบจะมีขนาด ค่าเริ่มต้นสำหรับ div คือการกำหนดความกว้างจากพาเรนต์และค่าเริ่มต้นสำหรับเซลล์ตารางคือการกำหนดขนาดโดยขึ้นอยู่กับขนาดของเนื้อหา

กฎสำหรับวิธีการdivกำหนดขนาดควรถูกกำหนดไว้อย่างดีในมาตรฐาน แต่กฎสำหรับวิธีการtdกำหนดขนาดควรไม่ได้กำหนดไว้อย่างดีดังนั้นเบราว์เซอร์ที่แตกต่างกันจึงใช้อัลกอริทึมที่แตกต่างกันเล็กน้อย

หลังจากตรวจสอบXHTML DTDฉันค้นพบว่า <TD> - องค์ประกอบได้รับอนุญาตให้มีองค์ประกอบของบล็อกเช่นส่วนหัวรายการและยัง <DIV> - องค์ประกอบ ดังนั้นการใช้ <DIV> - องค์ประกอบภายใน <TD> - องค์ประกอบไม่ละเมิดมาตรฐาน XHTML ฉันค่อนข้างแน่ใจว่ารูปแบบที่ทันสมัยอื่น ๆ ของ HTML มีรูปแบบเนื้อหาที่เทียบเท่าสำหรับ <TD> - องค์ประกอบ

นี่คือกฎ DTD ที่เกี่ยวข้อง:

<!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">

ไม่จำเป็น

หากคุณต้องการวาง DIV ภายใน TD ตรวจสอบให้แน่ใจว่าคุณใช้ TD อย่างถูกต้อง หากคุณไม่สนใจข้อมูลตารางและความหมายคุณจะไม่สนใจ DIV ใน TD ฉันไม่คิดว่าจะมีปัญหา - ถ้าคุณต้องทำคุณก็สบายดี

ตามข้อกำหนดของ HTML

<div>สามารถวางที่เนื้อหาไหลคาดว่า¹ซึ่งเป็น<td>รูปแบบเนื้อหา2

ตารางเซลล์สามารถมีองค์ประกอบระดับบล็อกที่ถูกต้องตามกฎหมายดังนั้นจึงไม่ใช่ faux-pas แน่นอนว่าการฝังเบราว์เซอร์ทำให้ตำแหน่งนี้เป็นการเก็งกำไรทางทฤษฎี มันอาจทำให้เกิดปัญหารูปแบบและข้อบกพร่อง

แม้ว่าเป็นตารางที่ใช้สำหรับเค้าโครง - และบางครั้งก็ยังคงเป็น - ฉันจินตนาการว่าเบราว์เซอร์ส่วนใหญ่จะแสดงเนื้อหาอย่างถูกต้อง แม้แต่ IE

หากคุณต้องการใช้ตำแหน่ง: สัมบูรณ์; ใน div ด้วยposition: relative;บน td คุณจะพบปัญหา FF, ซาฟารีและโครเมี่ยม (mac ไม่ใช่พีซีแม้ว่า) จะไม่วาง div เทียบกับ td (อย่างที่คุณคาดหวัง) นี่ก็เป็นจริงสำหรับ divs ด้วยdisplay: table-whatever;ดังนั้นหากคุณต้องการทำเช่นนั้นคุณต้องมีสอง divs หนึ่งสำหรับ ภาชนะwidth: 100%; height: 100%;และไม่มีขอบจึงเติม td โดยไม่มีผลกระทบต่อภาพใด ๆ แล้วอันที่แน่นอน

นอกเหนือจากนั้นทำไมไม่แยกเซลล์?

ฉันได้ประสบปัญหาโดยการวางภายใน<div><td>

ฉันไม่สามารถระบุ div ที่ใช้ได้document.getElementById()หากฉันวางไว้ข้างใน td แต่ข้างนอกมันใช้ได้ดี

ตามที่ทุกคนพูดถึงมันอาจจะไม่ใช่ความคิดที่ดีสำหรับวัตถุประสงค์ในการจัดวาง ฉันมาถึงคำถามนี้เพราะฉันสงสัยเหมือนกันและฉันแค่อยากจะรู้ว่ามันจะเป็นรหัสที่ถูกต้องหรือไม่

เนื่องจากถูกต้องคุณสามารถใช้เพื่อวัตถุประสงค์อื่น ตัวอย่างเช่นสิ่งที่ฉันจะใช้เพื่อใส่ divs "CSSed" ที่สวยงามในแถวของตารางแล้วใช้ฟังก์ชัน jQuery ด่วนเพื่อให้ผู้ใช้เรียงลำดับข้อมูลตามราคาชื่อ ฯลฯ ด้วยวิธีนี้ ตารางเลย์เอาต์เท่านั้นที่จะให้ฉันคือ "ลำดับแนวตั้ง" แต่ฉันจะควบคุมความกว้างความสูงพื้นหลังและอื่น ๆ ของ div ด้วย CSS

สองวิธีในการจัดการกับมัน

1. ใส่แท็กdivภายในtbody
2. ใส่แท็กdivภายในtr

ทั้งสองวิธีนั้นถูกต้องหากคุณเห็น feference: https://stackoverflow.com/a/23440419/2305243

มันแบ่งความหมายนั่นคือทั้งหมดที่ มันใช้งานได้ดี แต่อาจมีโปรแกรมอ่านหน้าจอหรือบางอย่างที่ไม่สนุกกับการประมวลผล HTML ของคุณหากคุณ "หยุดความหมาย"