ทำให้ความกว้างของเซลล์ในแถวตารางที่สองเท่ากับความกว้างของเซลล์ในแถวตารางแรกหรือไม่

ฉันใช้ คุณสมบัติ CSS display ที่มีค่า table, table-row และ table-cell ในการจัดวาง เอกสารของฉันในรูปแบบตาราง

โดยปกติ (ดังที่คุณเห็นในโค้ด) ขนาดของเซลล์ในตารางจะสัมพันธ์กับเนื้อหาที่มี (จนกว่าเราจะระบุค่ามิติแบบฮาร์ดโค้ด

แต่ฉันต้องการให้ table-cell ในวินาที (และอื่นๆ) table-row มีความกว้างเท่ากับ table-cell ที่สอดคล้องกันจาก table-row แรก ดังนั้นความกว้างของ table-cell แถวที่ 1 ในแถวที่สองจึงเหมือนกับ ความกว้างของ table-cell อันที่ 1 ใน table-row แรก เป็นไปได้ไหม?

ฉันต้องการทำสิ่งนี้โดยไม่ต้องเพิ่มคุณสมบัติ pixel margin หรือ padding ฯลฯ ใน table-row วินาทีและต่อมา ฉันแค่อยากให้มันได้ width ของเซลล์ที่อยู่ด้านบน

ดังนั้นท้ายที่สุดแล้ว ความกว้างของคอลัมน์จะเท่ากับความกว้างของเซลล์ที่กว้างที่สุดในคอลัมน์

ฉันจะทำเช่นนั้นได้อย่างไร?

นี่คือซอ ในโค้ด แถวทั้งสามมีสีต่างกัน

รหัส:

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. </label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <input type="radio" name="radio_group2" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group2" value="1" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. </label>
    </div>
</div>

html css html-table
person Solace    schedule 27.08.2014    source แหล่งที่มา
comment
อ่า! อย่าทำอย่างนั้น หากคุณต้องการให้ตรงกันทุกประการอย่างชัดเจนหรือใช้เค้าโครงตาราง (ไอ)   -  person Daniel A. White    schedule 27.08.2014
comment
อย่าใช้สไตล์อินไลน์ โปรดกำหนดสไตล์ของคุณในไฟล์ CSS แยกต่างหาก   -  person Dan    schedule 27.08.2014
comment
คุณมีจำนวนเซลล์ในแต่ละแถวไม่ถูกต้อง - ควรจับคู่กันหากคุณต้องการให้เท่ากันเนื่องจากตารางแสดงผลไม่มีสิ่งต่าง ๆ เช่น colspan เนื่องจากข้อมูลของคุณดูราวกับว่าสามารถจัดประเภทเป็นตารางได้ คุณควรใช้ตารางที่เหมาะสมโดยตั้งค่า th และ scopes สำหรับแถวแรก   -  person Pete    schedule 27.08.2014
comment
@ DanielA.White Html-table ถูกตัดออก ฉันไม่สามารถใช้สิ่งนั้นได้ ปัญหาเกี่ยวกับ width ที่ชัดเจนก็คือในแถวแรก บางครั้งจะมีคำที่เล็กเท่ากับ 'ใช่' และ No เป็นป้ายกำกับ และบางครั้ง inferrable และ Not inferrable เช่น ถ้าฉันทำให้มัน width:150px โดยคำนึงถึง Not Inferrable มันจะกว้างเกินไปสำหรับคำว่า No   -  person Solace    schedule 27.08.2014
comment
@Pete ถ้าฉันเพิ่มอันที่สาม table-cell ใน table-row แรกมันจะแก้ปัญหาได้หรือไม่   -  person Solace    schedule 27.08.2014
comment
@Dan ฉันมีเหตุผลบางประการที่จะใช้สไตล์อินไลน์ในขณะนี้ แต่ฉันเข้าใจถึงความสำคัญของการใช้สไตล์ชีตแยกกัน ฉันจะแปลงเป็นสไตล์ชีทในภายหลัง   -  person Solace    schedule 27.08.2014
comment
มันควรจะทำแม้ว่าฉันจะไม่ใช้สไตล์เซลล์ตารางโดยตรงกับอินพุต - บางทีอาจล้อมพวกมันไว้ในช่วงที่มีสไตล์เซลล์ตารางแสดงผลติดอยู่ - jsfiddle.net/coyvacm5   -  person Pete    schedule 27.08.2014
comment
@พีท ขอบคุณครับ คำถามติดตามผล: ทำไมไม่ใช้สไตล์กับอินพุตโดยตรง   -  person Solace    schedule 27.08.2014
comment
ปุ่มตัวเลือกมีสไตล์ที่จำกัดซึ่งคุณสามารถใช้ได้ ดังนั้นคุณจะได้ผลลัพธ์ที่หลากหลาย ขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้   -  person Pete    schedule 27.08.2014
comment
@พีท ขอบคุณครับ วิธีแก้ไขของคุณคือคำตอบที่เหมาะสมที่สุด ดังนั้นหากคุณสามารถเขียนเป็นคำตอบได้ ฉันจะยอมรับ มันจะเป็นประโยชน์สำหรับผู้เยี่ยมชมในอนาคต   -  person Solace    schedule 27.08.2014

คำตอบ (2)


arrow_upward
1
arrow_downward

หากคุณเพิ่มเซลล์ในแถวแรกแล้วล้อมอินพุตของคุณในช่วง:

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label> 
        <span style="display:table-cell;"></span>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons.</label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="1" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons.</label>
    </div>
</div>

คุณควรจะสามารถบรรลุสิ่งที่คุณต้องการได้ - ตัวอย่าง

ชื่อเรื่องในบรรทัดเดียวแทนที่จะรวม

person Pete    schedule 27.08.2014

arrow_upward
1
arrow_downward

องค์ประกอบ DIV, label และ input ทั้งหมดแยกจากกันโดยสิ้นเชิง และแม้ว่าจะตั้งค่าเป็น display: table-cell องค์ประกอบเหล่านั้นก็ไม่มีความสัมพันธ์ภายในและไม่มีความรู้เกี่ยวกับมิติข้อมูลของกันและกัน

คุณจะต้องกำหนดความกว้างอย่างชัดเจนเพื่อให้ความกว้างตรงกัน (จากนั้นคุณไม่จำเป็นต้องใช้คุณสมบัติ display อีกต่อไป)

นี่คือ การสาธิต jsfiddle พร้อมการแก้ไขโค้ดของคุณ:

http://jsfiddle.net/erlingormar/ga1hzrLd/

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

person erlingormar    schedule 27.08.2014
comment
ไม่ ไม่ ไม่ สิ่งที่ฉันกำลังมองหาคือปุ่มตัวเลือกควรอยู่ใต้สองเซลล์แรกของแถวแรก (ป้ายกำกับ inferrable และ Not inferrable) - person Solace; 27.08.2014
comment
ปัญหาเกี่ยวกับความกว้างที่ชัดเจนคือในแถวแรก บางครั้งอาจมีคำที่เล็กเท่ากับ Yes และ No ถึง labels และบางครั้งก็มีคำที่ยาว เช่น inferrable และ Not inferrable เช่น ถ้าฉันทำให้มัน width:150px โดยคำนึงถึง Not Inferrable มันจะกว้างเกินไปสำหรับคำว่า No - person Solace; 27.08.2014