Hiển thị CSS: bảng-hàng không mở rộng khi chiều rộng được đặt thành 100%

96

Tôi đang gặp một chút vấn đề. Tôi đang sử dụng FireFox 3.6 và có cấu trúc DOM sau:

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

Và CSS sau:

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

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

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

Nếu tôi cởi display:table-rownó ra, nó sẽ xuất hiện chính xác, với view-rowchiều rộng hiển thị là 100%. Nếu tôi đặt nó trở lại nó sẽ co lại. Tôi đã đưa điều này lên JS Bin:

http://jsbin.com/ifiyo

Chuyện gì vậy?

css

— bạn của cơ hội
nguồn

90

Nếu bạn đang sử dụng display:table-row, v.v., thì bạn cần đánh dấu thích hợp, bao gồm một bảng chứa. Nếu không có nó, câu hỏi ban đầu của bạn về cơ bản cung cấp dấu hiệu xấu tương đương là:

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

Bảng ở trên ở đâu? Bạn không thể chỉ có một hàng ra khỏi hư không (tr phải được chứa trong một trong hai table, thead, tbody, vv)

Thay vào đó, hãy thêm một phần tử bên ngoài với display:table, đặt 100% chiều rộng trên phần tử chứa. Hai ô bên trong sẽ tự động đi theo tỷ lệ 50/50 và căn chỉnh văn bản ngay trên ô thứ hai. Quên floatsvới các phần tử bảng. Nó sẽ gây ra rất nhiều đau đầu.

đánh dấu:

<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.
nguồn

11

+5 khi thoát khỏi cái phao chết tiệt!

— chum cơ hội

37

-1 vì lời giải thích chỉ là sai. Theo thông số kỹ thuật CSS2.1 , đánh dấu / CSS được đề cập phải hoạt động.

— user123444555621

8

Không có trình duyệt nào gặp vấn đề với bảng bị thiếu (Firefox 3.0 có ...) Vấn đề thực tế là cài đặt độ rộng trên các hàng của bảng hoàn toàn bị bỏ qua . (có nghĩa là đánh dấu / CSS trong câu hỏi nào trong thực tế không làm việc như mong đợi, vì vậy nhận xét của tôi ở trên là sai;))

— user123444555621

3

Câu trả lời này không chính xác. Đánh dấu của người hỏi là chính xác. Như Pumbaa80 nói, vấn đề là giả định rằng chiều rộng phải ở mức hàng thay vì mức bảng. Chiều rộng chỉ được hiểu ở cấp bảng. Các hàng có thể được bỏ qua hoàn toàn. Xem câu trả lời đầy đủ của tôi bên dưới.

— Amin Ariana

1

Tôi đã không bình luận về câu trả lời hoạt động. Tôi đã nhận xét về nhận xét của bạn rằng bạn phải bao gồm một hàng bảng trong CSS. Bạn không. Nói điều gì đó là giả có giá trị bởi vì đối với bạn niềm tin cá nhân là một điều rất giáo điều / cứng nhắc để nói; Đặc biệt là khi CSS hoàn toàn hợp lệ.

— Bill Rosmus

56

Câu trả lời đã kiểm tra:

Trong css .view-row, hãy thay đổi:

display:table-row;

đến:

display:table

và thoát khỏi "float" . Mọi thứ sẽ diễn ra như mong đợi.

Như nó đã được đề xuất trong các bình luận, không cần phải có một bảng kết thúc. CSS cho phép bỏ qua các cấp của cấu trúc cây (trong trường hợp này là các hàng) ẩn. Lý do mã của bạn không hoạt động là "chiều rộng" chỉ có thể được hiểu ở cấp bảng, không phải ở cấp hàng bảng. Khi bạn có "bảng" và sau đó là "ô bảng" ngay bên dưới, chúng được hiểu ngầm là đang ngồi trong một hàng.

Ví dụ làm việc:

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

với css:

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

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

— Amin Ariana
nguồn

Câu trả lời của bạn gợi ý rằng CSS tương đương <table><td></td></table>tự nó sẽ là đánh dấu HTML không hợp lệ theo W3C. Trong khi nó sẽ xác thực, tại sao bạn lại đề xuất yêu cầu trình duyệt bắt chước đánh dấu này?

— KP.

16

Điều này đúng theo quy tắc CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Việc duy trì dễ dàng hơn bằng cách loại bỏ các dòng mã không cần thiết (ví dụ: div <view-row> không cần thiết do KP đề xuất). Điều này đã giúp tôi ... Tôi đang sử dụng nó. +1

— Bill Rosmus

1

Sẽ không đủ nếu chỉ loại bỏ các câu lệnh float? Div .view có thể giữ cho nó thuộc tính display: table-row.

— Ideogram

1

Nó tốt, ~~ nhưng không hoạt động trên IE9 theo như tôi có thể nói. ~~ Tôi sai. Thật tuyệt vời! :)

— f1lt3r

Tất nhiên hiển thị: bảng không có ích khi bạn có nhiều hơn 1 hàng. Họ kết quả tất cả xấu unaligned

— edc65

16

Lưu ý rằng theo thông số CSS3, bạn KHÔNG phải bao bọc bố cục của mình trong một phần tử kiểu bảng. Trình duyệt sẽ suy ra sự tồn tại của các phần tử chứa nếu chúng không tồn tại.

— John Carney
nguồn

4

Điều tương tự đã được nêu rõ trong CSS 2.1 , mục 17.2.1, đầu trang 3.2. Ví dụ HBOX / VBOX dưới đây chính xác là trường hợp được đề cập. Vì vậy, có vẻ như các trình duyệt không quan tâm.

— user123444555621

1

cung cấp cho trên .view-typelớp float:left;hoặc xóa float:right;của.view-name

chỉnh sửa:<div class="view-row"> Ví dụ : bọc div của bạn bằng một div khác<div class="table">

và đặt css sau:

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

Bạn phải sử dụng cấu trúc bảng để có kết quả chính xác.

— Sotiris
nguồn

Tôi đã thử nghiệm với ff3.6, tức là 8, chrome, opera. bạn có thể thấy nó ở đây jsbin.com/ifiyo/4 chúng cho thấy chúng cạnh nhau

— Sotiris

Tôi đang tìm cách đặt tên ở ngoài cùng bên phải, nhập ở ngoài cùng bên trái ... nếu bạn thực hiện một màn hình: nội dòng trên cả hai và lấy màn hình ra: table-row nó hoạt động, tôi đã nghĩ có thể có cách tốt hơn để làm điều đó bằng cách sử dụng thuộc tính table-row / cell.

— chum cơ hội

0

Bạn có thể lồng ô bảng trực tiếp trong bảng. Bạn có một cái bàn. Bắt đầu với hàng bảng không hoạt động. Hãy thử nó với HTML này:

<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
nguồn