CSS bảng chiều rộng bằng nhau


147

Tôi có một số lượng không xác định các thành phần ô trong bảng chứa.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Có cách CSS thuần túy nào để khiến các ô bảng có chiều rộng bằng nhau ngay cả khi chúng có nội dung có kích thước khác nhau bên trong chúng không?

Cảm ơn.

Chỉnh sửa: Có chiều rộng tối đa sẽ đòi hỏi bạn biết tôi nghĩ có bao nhiêu ô?


Làm thế nào là số lượng cột được xác định: phía máy khách hoặc máy chủ?
iambriansreed

Sau khi tôi thử một số phương pháp, tôi nghĩ nếu bạn muốn có nhiều hàng và muốn chúng có chiều rộng bằng nhau, hãy sử dụng flexbox thay vì bảng
Eric

Câu trả lời:


298

Dưới đây là một câu đố làm việc với số lượng ô không xác định: http://jsfiddle.net/r9yrM/1/

Bạn có thể sửa chiều rộng cho mỗi phụ huynh div( bảng ), nếu không, nó sẽ là 100% như bình thường.

Mẹo là sử dụng table-layout: fixed;và một số chiều rộng trên mỗi ô để kích hoạt nó, ở đây là 2%. Điều đó sẽ kích hoạt bảng algorightm khác, bảng mà trình duyệt cố gắng hết sức để tôn trọng kích thước được chỉ định.
Vui lòng kiểm tra với Chrome (và IE8- nếu cần). Nó ổn với một Safari gần đây nhưng tôi không thể nhớ khả năng tương thích của thủ thuật này với chúng.

CSS (hướng dẫn liên quan):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Cẩn thận với Safari 6 trên OS X, nó có table-layout: fixed; lỗi (hoặc có thể chỉ khác, rất khác so với các trình duyệt khác. Tôi đã không đọc bằng cách bố trí bảng CSS2.1 REC;)). Hãy chuẩn bị cho các kết quả khác nhau.


1
Cảm ơn, đây có vẻ như câu trả lời. Tôi không biết tại sao nhưng nếu tôi đặt chiều rộng thành 2% thì nó thực sự sẽ tăng mỗi cột thành 2%. Nhưng 100% dường như làm việc tuyệt vời. Có ai biết chuyện gì đang xảy ra ở đó không?
Harry

3
Tôi gặp vấn đề tương tự là cần sử dụng chiều rộng 100% trên các ô của bảng. Điều này đã xảy ra vì một mã xóa được áp dụng cho phần tử cha có display: bảng. Vì các ô có chiều rộng 100% không hoạt động trong IE8, cách khắc phục đối với tôi là xóa mã xóa. Hy vọng điều này sẽ giúp được ai đó.
Alex Barrett

Để mở rộng về điều này, cách này hoạt động cho các bố cục đơn giản (1x1, 2x2, 3x3, v.v.) nhưng bố cục phức tạp (1x3x1, 1x2x3x4, v.v.) yêu cầu các divs bổ sung display:tableđược sử dụng như thể chúng là hàng, không display:tabl-rownhư mong đợi. Ví dụ ở đây .
filoxo

2
100% chiều rộng không hoạt động trên IE8 (bất ngờ) nhưng đề xuất ban đầu cho 2% cung cấp kết quả chính xác.

1
100% chiều rộng cũng không hoạt động trong IE10. Nó đã làm việc trong IE11. Và chiều rộng 1% khiến Mobile Safari hiển thị các cột siêu hẹp. Vì vậy, tôi đã kết thúc bằng cách sử dụng hack CSS nhắm mục tiêu IE9 và IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }Việc hack CSS là từ đây: stackoverflow.com/a/24321386/6962
Henrik N

29

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

BẢN GIỚI THIỆU.


Fiddle không hoạt động ở đây. Các tế bào luôn luôn là 25%.
netAction

Giải pháp này không thể mở rộng cho mọi thứ năng động, chẳng hạn như điều hướng trang web được kiểm soát bởi khách hàng.
Eric K

Có lẽ bạn đã đúng và btw, đó là gần hai năm tuổi anser @QuantumDOUNDix. Có bất cứ điều gì tốt hơn trong tâm trí? Tại sao không chỉ chia sẻ ý tưởng của bạn, cho thế giới biết những điều tốt hơn :-)
Alpha

15

Chỉ sử dụng max-width: 0trong display: table-cellphần tử làm việc cho tôi:

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

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}
<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>


1
Chỉ cần nitpicking ở đây, nhưng 0pxkhông phải là một đơn vị hợp lệ. Nó chỉ nên là 0.
Gavin

Điều này làm việc cho tôi, nhưng bạn có thể giải thích làm thế nào nó hoạt động?
Emmanual

6

Thay thế

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

với

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

Nhìn vào tất cả các vấn đề xung quanh việc cố gắng làm cho div hoạt động như bảng. Họ đã phải thêm bảng-xxx để bắt chước bố cục bảng

Các bảng được hỗ trợ và hoạt động rất tốt trong tất cả các trình duyệt. Tại sao lại bỏ rơi họ? việc họ phải bắt chước họ là bằng chứng họ đã làm tốt công việc của mình.

Theo tôi, sử dụng công cụ tốt nhất cho công việc và nếu bạn muốn dữ liệu được lập bảng hoặc một cái gì đó tương tự như bảng dữ liệu được lập bảng chỉ hoạt động.

Tôi trả lời rất muộn nhưng đáng để lên tiếng.


2
+1 vì nó hoạt động và vì CSS vẫn còn, năm 2014 không thực hiện điều này một cách chính xác trên tất cả các trình duyệt.
Yuck

6
Đôi khi bạn muốn bố trí giống như bảng cho những thứ không được lập bảng dữ liệu. ví dụ như các yếu tố chuyển hướng mà nên sử dụng <nav>, <ul>vv
Bến

1
Để đáp ứng, đó là lý tưởng để có một bố trí dựa trên div. Hiển thị bảng trong thiết bị di động là một nỗi đau ở mông.
Pablo Rincon

Cố gắng mô phỏng một bảng ngăn chặn thiết kế đáp ứng. Tôi đồng ý nếu bạn muốn thiết kế đáp ứng, bảng không phải là sự lựa chọn.
DeveloperChris

2
Các bảng được tạo để hiển thị dữ liệu dạng bảng: đó là, và đó sẽ là các phần tử HTML được sử dụng để hiển thị dữ liệu dạng bảng, tại sao mọi người sẽ bỏ chúng (cho mục đích đó)? Bố cục bảng không bắt chước : hiện tại nó là một phần của khuyến nghị CSS2 và điều này xảy ra rằng bố cục mặc định của các bảng HTML là display: table-etc(hoàn toàn tự nhiên). Tôi không dành nhiều ngày để tạo liên kết bắt chước div hoặc div bắt chước bảng, nhịp hoặc đầu vào: Tôi chỉ sử dụng CSS để tạo kiểu. Cuối cùng, chúc may mắn với IE9 khi áp dụng bất kỳ giá trị nào khác của displaytài sản cho các phần tử bảng, tr, td.
FelipeAls

1

cái này sẽ làm việc cho tất cả mọi người

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Điều này cũng sẽ làm việc cho dữ liệu bảng được tạo bởi lặp


0

Ở đây bạn đi:

http://jsfiddle.net/damsarabi/gwAdA/

Bạn không thể sử dụng width: 100px, vì màn hình hiển thị là ô bảng. Tuy nhiên, bạn có thể sử dụng Max-width: 100px. thì hộp của bạn sẽ không bao giờ lớn hơn 100px. nhưng bạn cần thêm tràn: ẩn để đảm bảo khung cảnh không bị chảy sang các ô khác. bạn cũng có thể thêm khoảng trắng: nowrap nếu bạn muốn giữ cho chiều cao không tăng.


0

Điều này có thể được thực hiện bằng cách đặt kiểu ô của bảng thành width: auto và nội dung trống. Các cột bây giờ rộng bằng nhau, nhưng không có nội dung.

Để chèn nội dung vào ô, thêm một divvới css:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

Bạn cũng cần thêm position: relative vào các ô.

Bây giờ bạn có thể đặt nội dung thực tế vào div đã nói ở trên.

https://jsfiddle.net/vensvvb/

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.