Jadikan lebar sel pada baris tabel kedua sama dengan lebar sel pada baris tabel pertama?

Saya menggunakan properti CSS display dengan nilai table, table-row dan table-cell untuk tata letak dokumen saya dalam bentuk tabel.

Biasanya (seperti yang Anda lihat dalam kode) ukuran sel dalam tabel terkait dengan konten yang dikandungnya (sampai kami memberikan nilai dimensi yang dikodekan secara permanen.

Tetapi saya ingin table-cells di table-row kedua (dan seterusnya) memiliki lebar yang sama dengan table-cell yang sesuai dari table-row pertama. Jadi lebar table-cell pertama di baris kedua sama dengan lebar table-cell pertama di table-row pertama. Apa itu mungkin?

Saya ingin melakukan ini tanpa harus menambahkan properti pixel margin atau padding dll. di table-rows kedua dan selanjutnya. Saya hanya ingin mendapatkan width sel di atasnya.

Jadi pada akhirnya, lebar kolom akan sama dengan lebar sel terluas di kolom tersebut.

Bagaimana saya bisa melakukan itu?

Ini biolanya. Dalam kodenya, ketiga baris tersebut memiliki warna yang berbeda.

KODE:

<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 sumber
comment
ahhhh! jangan lakukan itu. jika Anda ingin keduanya sama persis, tampilkan secara eksplisit atau gunakan tata letak tabel (batuk)   -  person Daniel A. White    schedule 27.08.2014
comment
Jangan gunakan gaya sebaris, tentukan gaya Anda dalam file CSS terpisah.   -  person Dan    schedule 27.08.2014
comment
Anda memiliki jumlah sel yang salah di setiap baris - sel tersebut harus cocok jika Anda ingin sel tersebut sama karena tabel tampilan tidak memiliki hal-hal seperti colspan. Karena data Anda terlihat seolah-olah dapat digolongkan sebagai tabel, Anda sebaiknya menggunakan tabel yang sesuai dengan th dan scopes yang disetel untuk baris pertama   -  person Pete    schedule 27.08.2014
comment
@DanielA.White Html-table dikesampingkan, saya tidak bisa menggunakannya. Masalah dengan width eksplisit adalah bahwa di baris pertama, terkadang ada kata sekecil 'Ya` dan No sebagai label, dan terkadang inferrable dan Not inferrable. Jadi mis. jika saya membuatnya width:150px mengingat Not Inferrable, itu akan terlalu lebar untuk kata No   -  person Solace    schedule 27.08.2014
comment
@Pete Jika saya menambahkan table-cell ketiga di table-row pertama, apakah itu akan menyelesaikan masalah?   -  person Solace    schedule 27.08.2014
comment
@Dan Saya punya beberapa alasan untuk menggunakan gaya sebaris untuk saat ini, namun saya memahami pentingnya menggunakan lembar gaya terpisah. Saya nanti akan mengonversinya menjadi stylesheet.   -  person Solace    schedule 27.08.2014
comment
itu harus dilakukan meskipun saya juga tidak akan menggunakan gaya sel tabel secara langsung pada input - mungkin membungkusnya dalam rentang dengan gaya tampilan sel tabel yang melekat padanya - jsfiddle.net/coyvacm5   -  person Pete    schedule 27.08.2014
comment
@Pete Terima kasih. Pertanyaan lanjutan: Mengapa tidak menggunakan style langsung pada input?   -  person Solace    schedule 27.08.2014
comment
Tombol radio memiliki gaya terbatas yang dapat Anda terapkan sehingga Anda akan mendapatkan hasil yang berbeda-beda tergantung pada browser yang Anda gunakan   -  person Pete    schedule 27.08.2014
comment
@Pete Terima kasih. Solusi Anda adalah jawaban yang paling tepat, jadi jika Anda bisa menuliskannya sebagai jawaban, saya akan menerimanya. Ini akan berguna bagi pengunjung di masa depan.   -  person Solace    schedule 27.08.2014

Jawaban (2)


arrow_upward
1
arrow_downward

Jika Anda menambahkan sel ke baris pertama dan kemudian menggabungkan input Anda dalam satu rentang:

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

Anda harus dapat mencapai apa yang Anda inginkan - example

Judul dalam satu baris, bukan dibalut

person Pete    schedule 27.08.2014

arrow_upward
1
arrow_downward

Semua elemen DIV, label, dan input sepenuhnya terpisah dan meskipun disetel ke display: table-cell, elemen tersebut tidak memiliki hubungan internal dan tidak memiliki pengetahuan tentang dimensi satu sama lain.

Anda harus menentukan lebarnya secara eksplisit agar lebarnya cocok. (Maka pada dasarnya Anda tidak memerlukan properti display untuk properti tersebut lagi).

Berikut demo jsfiddle dengan modifikasi pada kode Anda:

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

Ini memiliki saran untuk struktur modifikasi yang dapat Anda gunakan untuk menyelaraskan elemen Anda tanpa memikirkannya dalam tata letak seperti tabel:

person erlingormar    schedule 27.08.2014
comment
Tidak, tidak, tidak, Yang saya cari adalah tombol radio harus berada di bawah dua sel pertama dari baris pertama (label inferrable dan Not inferrable). - person Solace; 27.08.2014
comment
Masalah dengan lebar eksplisit adalah di baris pertama, terkadang ada kata sekecil Yes dan No hingga labels, dan terkadang kata panjang seperti inferrable dan Not inferrable. Jadi mis. jika saya membuatnya width:150px mengingat Not Inferrable, itu akan terlalu lebar untuk kata No - person Solace; 27.08.2014