Các ô bảng HTML có thể được sắp xếp lại với CSS không?

Ví dụ này

------------------------------------------------ 
|    A   | B | C | 
------------------------------------------------

có thể được hiển thị như:

------------------------------------------------ 
| C |    A   | B | 
------------------------------------------------

hoặc có lẽ ngay cả điều này:

------------------------- 
|   A   | 
------------------------- 
|  B  |  C  | 
-------------------------

Đây có phải là có thể với chỉ CSS hoặc là nó cần thiết để sửa đổi các nút HTML?

EDIT: Một số bạn đã tự hỏi tại sao điều này là cần thiết ở tất cả, vì vậy đây là vấn đề thực tế cuộc sống tôi phải đối mặt:

Tôi muốn hiển thị một danh sách các vấn đề báo cáo của người dùng:

------------------------------------------------------------------------------ 
| Problem description (A) | Reporting user (B) | Link to affected entity (C) | 
------------------------------------------------------------------------------

Tôi muốn đánh giá các bố cục khác nhau. Biến thể bố cục đầu tiên sẽ nhấn mạnh người dùng báo cáo, biến thể thứ hai sẽ nhấn mạnh mô tả văn bản.

Tôi không có bất kỳ vấn đề nào trong việc thay đổi cấu trúc và trên thực tế tôi đã làm, nhưng khi tôi viết mã này, tôi tự hỏi liệu có thể thực hiện được với CSS hay không. (Chỉ tò mò tinh khiết)

Nguồn

2011-09-10 Daniel Rikowski

Điều gì đó chỉ hoạt động trong các trình duyệt hiện đại có thể chấp nhận được không? – thirtydot

Bạn có đề cập cụ thể đến các ô bảng, như trong việc sử dụng các phần tử '

' hay bạn đang nói về thiết kế dạng bảng, ít giống như bàn? Những gì bạn đang yêu cầu thực sự không quá khó khăn trong một thiết kế ít tốn kém. – Wex

Tại sao bạn làm điều này với CSS?Nếu bạn muốn thay đổi ý nghĩa/cấu trúc của bảng, hãy thay đổi HTML. – BoltClock

Trả lời

Bạn có thể, nhưng nó không phải là điều tốt nhất để làm mặc dù (xem câu trả lời khác).
Dưới đây là ví dụ của tôi:

*{margin:0; padding:0} 
 
.type-a .b {width: 50%; float:left;} 
 
.type-a .a {width:100%; float:left;} 
 
.type-a .c {width: 50%; float:left;} 
 

 
.type-b .b {width: 25%; float:left;} 
 
.type-b .a {width: 50%; float:right;} 
 
.type-b .c {width: 25%; float:left;}

<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<br /> 
 
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table>

View on JSFiddle

Nguồn

2011-09-10 17:07:42

Về mặt kỹ thuật khi bạn xác định 'float: left | right; 'cho các phần tử' display: table-cell' bạn đang loại bỏ chúng khỏi bảng quản lý layout hoàn toàn. Ví dụ nếu bạn muốn làm cho các ô trong hàng có cùng chiều cao thì cách tiếp cận của bạn sẽ không hoạt động. Xem: http://jsfiddle.net/ye8Qa/1/ –

@ c-nụ cười, chính xác 100%. Tôi đã nói rằng đây không phải là điều tốt nhất để làm và bình luận của bạn là một lý do khác. Câu hỏi cũng không nói rằng nó phải tuân thủ quản lý bố trí bảng - mặc dù nó có thể ngụ ý;) –

Không có tính năng như vậy tại thời điểm này trong CSS.

CSS3 sẽ cung cấp flexbox model dưới dạng này hoặc dạng khác (công việc trên đó đang được phát triển tích cực tại thời điểm này tại W3C). Nó sẽ cho phép bạn làm những gì bạn muốn.

Nguồn

2011-09-10 17:06:58

bạn có thể làm điều đó một cách bẩn, bạn luôn có thể thử sử dụng tính năng phao.

nhưng đối với việc thiết kế cuối cùng mà bạn cung cấp như một ví dụ, tôi nghĩ rằng bạn sẽ có thể chơi xung quanh với chiều rộng (trên cùng một nên width: 100%; và 2 khác nên 50%)

Nguồn

2011-09-10 17:27:47 ahoura

bạn có thể làm tất cả ba, với đánh dấu thích hợp, mặc dù thêm, và một liên lạc của css. http://jsfiddle.net/jalbertbowdenii/xvBhF/

cảnh báo công bằng: Tôi không chắc chắn về cách xử lý dữ liệu bảng như thế này, tôi muốn nói rằng họ không làm như vậy, nhưng bất kể, nếu bạn ra công chúng thì bạn có thể muốn xem xét cái đó. Tôi chắc chắn có một cách với tất cả các hương vị thuộc tính html mà chỉ có trong phong cách bảng.

Nguồn

2011-09-11 06:32:32 albert

Các vấn đề liên quan