CSS “display: table-column” hoạt động như thế nào?

Question 1

Với HTML và CSS sau, tôi hoàn toàn không thấy gì trong trình duyệt của mình (Chrome và IE mới nhất tại thời điểm viết bài). Mọi thứ thu gọn xuống 0x0 px. Tại sao?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Question 2

Mô hình bảng CSS dựa trên mô hình bảng HTML http://www.w3.org/TR/CSS21/tables.html

Một bảng được chia thành ROWS và mỗi hàng chứa một hoặc nhiều ô. Tế bào là con của ROWS, chúng KHÔNG BAO GIỜ là con của cột.

"display: table-column" KHÔNG cung cấp cơ chế tạo bố cục dạng cột (ví dụ: các trang báo có nhiều cột, nơi nội dung có thể chảy từ cột này sang cột tiếp theo).

Đúng hơn, "bảng-cột" CHỈ đặt các thuộc tính áp dụng cho các ô tương ứng trong các hàng của bảng. Ví dụ: "Màu nền của ô đầu tiên trong mỗi hàng là màu xanh lá cây" có thể được mô tả.

Bản thân bảng luôn có cấu trúc giống như trong HTML.

Trong HTML (quan sát rằng "td" bên trong "tr" s, KHÔNG bên trong "col" s):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

HTML tương ứng sử dụng thuộc tính bảng CSS (Lưu ý rằng div "cột" không chứa bất kỳ nội dung nào - tiêu chuẩn không cho phép nội dung trực tiếp trong cột):

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>

Mở rộng đoạn mã

TÙY CHỌN : cả "hàng" và "cột" có thể được tạo kiểu bằng cách gán nhiều lớp cho mỗi hàng và ô như sau. Cách tiếp cận này mang lại sự linh hoạt tối đa trong việc chỉ định các tập hợp ô khác nhau hoặc các ô riêng lẻ được tạo kiểu:

//Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

Mở rộng đoạn mã

Trong các thiết kế linh hoạt ngày nay, sử dụng <div>cho nhiều mục đích, nên đặt một số lớp vào mỗi div, để giúp tham khảo nó. Ở đây, những gì từng có <tr>trong HTML đã trở thành class myrowvà <td>đã trở thành class mycell. Quy ước này là những gì làm cho các bộ chọn CSS ở trên trở nên hữu ích.

LƯU Ý HIỆU SUẤT : việc đặt tên lớp trên mỗi ô và sử dụng các bộ chọn nhiều lớp ở trên, sẽ có hiệu suất tốt hơn so với việc sử dụng các bộ chọn kết thúc bằng *, chẳng hạn như .row1 *hoặc thậm chí .row1 > *. Lý do là các bộ chọn được so khớp cuối cùng trước , vì vậy khi các phần tử phù hợp đang được tìm kiếm, .row1 *trước tiên hãy thực hiện *khớp với tất cả các phần tử, sau đó kiểm tra tất cả tổ tiên của mỗi phần tử , để tìm xem có tổ tiên nào không class row1. Điều này có thể chậm trong một tài liệu phức tạp trên một thiết bị chậm. .row1 > *tốt hơn, bởi vì chỉ cha mẹ trực tiếp được kiểm tra. Nhưng tốt hơn hết là vẫn nên loại bỏ ngay hầu hết các yếu tố, thông qua .row1 .cell1. (.row1 > .cell1là một thông số kỹ thuật thậm chí còn chặt chẽ hơn, nhưng đó là bước đầu tiên của tìm kiếm tạo ra sự khác biệt lớn nhất, vì vậy nó thường không đáng để lộn xộn và quá trình suy nghĩ thêm về việc liệu nó có luôn là con trực tiếp hay không, khi thêm bộ chọn con >.)

Điểm mấu chốt để lấy lại hiệu suất là mục cuối cùng trong bộ chọn phải càng cụ thể càng tốt và không bao giờ nên như vậy *.

Question 3

Kiểu hiển thị "table-column" có nghĩa là nó hoạt động giống như <col>thẻ trong HTML - tức là một phần tử vô hình có chiều rộng * chi phối chiều rộng của cột vật lý tương ứng của bảng bao quanh.

Xem tiêu chuẩn W3C để biết thêm thông tin về mô hình bảng CSS.

* Và một vài thuộc tính khác như đường viền, hình nền.