Tampilan CSS: baris tabel tidak meluas saat lebar disetel ke 100%

98

Saya mengalami sedikit masalah. Saya menggunakan FireFox 3.6 dan memiliki struktur DOM berikut:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

Dan CSS berikut:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

Jika saya melepasnya display:table-rowakan muncul dengan benar, dengan view-rowmenunjukkan lebar 100%. Jika saya mengembalikannya, itu menyusut. Saya telah memasang ini di JS Bin:

http://jsbin.com/ifiyo

Apa yang sedang terjadi?

css

— sahabat kebetulan
sumber

90

Jika Anda menggunakan display:table-rowdll, maka Anda memerlukan markup yang tepat, yang mencakup tabel berisi. Tanpa itu, pertanyaan asli Anda pada dasarnya memberikan markup buruk yang setara dengan:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Dimana tabel diatas? Anda tidak bisa hanya memiliki baris entah dari mana (tr harus terkandung dalam baik table, thead, tbody, dll)

Sebagai gantinya, tambahkan elemen luar dengan display:table, letakkan lebar 100% pada elemen penampung. Dua sel di dalam akan secara otomatis menjadi 50/50 dan meratakan teks tepat di sel kedua. Lupakan floatsdengan elemen tabel. Itu akan menyebabkan banyak sakit kepala.

markup:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

— KP.
sumber

11

+5 untuk menyingkirkan pelampung sialan itu!

— Sahabat kebetulan

37

-1 karena penjelasannya salah. Menurut spesifikasi CSS2.1 , markup / CSS yang dimaksud seharusnya berfungsi.

— pengguna123444555621

8

Tidak ada browser yang memiliki masalah dengan tabel yang hilang (Firefox 3.0 memiliki ...) Masalah sebenarnya adalah bahwa pengaturan lebar pada baris tabel diabaikan sepenuhnya . (yang berarti markup / CSS yang dipermasalahkan sebenarnya tidak berfungsi seperti yang diharapkan, jadi komentar saya di atas salah;))

— user123444555621

3

Jawaban ini salah. Markup penanya benar. Seperti yang dikatakan Pumbaa80, masalahnya adalah dengan asumsi bahwa lebar harus pada tingkat baris, bukan pada tingkat tabel. Lebar hanya diinterpretasikan pada tingkat tabel. Baris dapat sepenuhnya dihilangkan. Lihat jawaban lengkap saya di bawah ini.

— Amin Ariana

1

Saya tidak mengomentari jawaban yang berhasil. Saya mengomentari komentar Anda bahwa Anda harus menyertakan baris tabel di CSS. Kamu tidak. Mengatakan sesuatu adalah valid palsu karena keyakinan pribadi Anda adalah hal yang sangat dogmatis / kaku untuk dikatakan; Apalagi jika CSS itu sepenuhnya valid.

— Bill Rosmus

56

Jawaban yang diuji:

Di .view-row css, ubah:

display:table-row;

untuk:

display:table

dan singkirkan "float" . Semuanya akan bekerja seperti yang diharapkan.

Seperti yang telah disarankan di komentar, tidak perlu tabel pembungkus. CSS memungkinkan untuk menghilangkan level dari struktur pohon (dalam hal ini baris) yang implisit. Alasan kode Anda tidak berfungsi adalah karena "lebar" hanya dapat diinterpretasikan di tingkat tabel, bukan di tingkat baris tabel. Ketika Anda memiliki "tabel" dan kemudian "sel tabel" tepat di bawahnya, mereka secara implisit diartikan sebagai duduk dalam satu baris.

Contoh kerja:

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

dengan css:

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}

— Amin Ariana
sumber

Jawaban Anda menunjukkan padanan CSS <table><td></td></table>yang dengan sendirinya akan menjadi markup HTML yang tidak valid sesuai W3C. Sementara itu akan divalidasi, mengapa Anda menyarankan memberi tahu browser untuk meniru markup ini?

— KP.

16

Ini benar menurut aturan CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Lebih mudah untuk mempertahankannya dengan menghapus baris kode yang tidak diperlukan (misalnya, div <view-row> yang tidak perlu yang disarankan oleh KP.). Ini membantu saya ... Saya menggunakannya. +1

— Bill Rosmus

1

Bukankah cukup hanya dengan menghilangkan pernyataan float? Div .view dapat mempertahankan properti display: table-row.

— Ideogram

1

Ini bagus, ~~ tetapi tidak berfungsi di IE9 sejauh yang saya tahu. ~~ Saya salah. Itu bagus! :)

— f1lt3r

Tentu saja tampilan: tabel tidak ada gunanya bila Anda memiliki lebih dari 1 baris. Mereka semua menghasilkan hasil yang sangat tidak selaras

— edc65

16

Perhatikan bahwa sesuai dengan spesifikasi CSS3, Anda TIDAK perlu membungkus tata letak Anda dalam elemen gaya tabel. Browser akan menyimpulkan keberadaan elemen penampung jika tidak ada.

— John Carney
sumber

4

Hal yang sama telah ditentukan dalam CSS 2.1 , bagian 17.2.1, 3.2 teratas. Contoh HBOX / VBOX di bawah ini persis seperti yang dimaksud. Jadi sepertinya browser tidak peduli.

— pengguna123444555621

1

berikan di .view-typekelas float:left;atau hapus float:right;dari.view-name

edit: Bungkus div Anda <div class="view-row">dengan div lain misalnya<div class="table">

dan atur css berikut:

.table {
    display:table;
    width:100%;}

Anda harus menggunakan struktur tabel untuk mendapatkan hasil yang benar.

— Sotiris
sumber

Saya menguji dengan ff3.6, yaitu 8, chrome, opera. Anda dapat melihatnya di sini jsbin.com/ifiyo/4 mereka menunjukkannya secara berdampingan

— Sotiris

Saya mencari nama di paling kanan, ketik paling kiri ... jika Anda melakukan tampilan: sebaris di keduanya dan keluarkan tampilan: baris tabel berfungsi, saya berpikir mungkin ada cara yang lebih baik untuk lakukan dengan menggunakan properti tabel-baris / sel.

— Sahabat kebetulan

0

Anda dapat menumpuk sel tabel langsung di dalam tabel. Anda harus memiliki meja. Memulai baris tabel tidak bekerja. Cobalah dengan HTML ini:

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>

— rakensi
sumber