Cách CSS để căn chỉnh bảng theo chiều ngang

96

Tôi muốn hiển thị một bảng có chiều rộng cố định ở giữa cửa sổ trình duyệt. Bây giờ tôi sử dụng

<table width="200" align="center">

Nhưng Visual Studio 2008 đưa ra cảnh báo trên dòng này:

Thuộc tính 'align' được coi là lỗi thời. Một cấu trúc mới hơn được khuyến khích.

Tôi nên áp dụng kiểu CSS nào cho bảng để có được bố cục giống nhau?

— Alexander Prokofyev
nguồn

2

Vậy cuối cùng, giải pháp nào bạn đã đi tìm?

— Ola Tuvesson

183

Steven đúng, về lý thuyết :

cách "chính xác" để căn giữa bảng bằng CSS. Các trình duyệt phù hợp phải căn giữa bảng nếu lề trái và lề phải bằng nhau. Cách đơn giản nhất để thực hiện điều này là đặt lề trái và lề phải thành “tự động”. Do đó, người ta có thể viết trong một style sheet:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Nhưng bài báo đã đề cập ở đầu câu trả lời này cung cấp cho bạn tất cả các cách khác để căn giữa một bảng.

Một giải pháp trình duyệt chéo css thanh lịch: Tính năng này hoạt động trong cả MSIE 6 (Quirks and Standards), Mozilla, Opera và thậm chí Netscape 4.x mà không cần đặt bất kỳ độ rộng rõ ràng nào:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

— VonC
nguồn

Bạn có thể đưa bảng vào giữa với margin: 0 auto; trong IE6 trở lên nếu bạn đảm bảo trang của mình có khai báo loại tài liệu hợp lệ.

— Ola Tuvesson

@Marco: Tôi không có thông tin này ngay bây giờ, nhưng đó có thể là cơ sở tốt cho câu hỏi trên StackOverflow.

— VonC

1

bạn hoàn toàn đúng. TABLE không cần chỉ định chiều rộng để căn giữa theo chiều ngang. Tôi đã thử nghiệm nó. DIV trắng nhất cần phải xác định độ rộng để căn giữa theo chiều ngang.

— Marco Demaio

17

Thử cái này:

<table width="200" style="margin-left:auto;margin-right:auto">

— jalbert
nguồn

2

Đơn giản. IE6 trở lên sẽ vui vẻ căn giữa bảng của bạn với "margin: 0 auto;" nếu chỉ trang hiển thị ở chế độ "tiêu chuẩn". Để thực hiện điều này, bạn cần khai báo loại tài liệu hợp lệ, chẳng hạn như

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

hoặc là

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Đúng, IE5.5 trở xuống sẽ vẫn từ chối căn giữa bảng nhưng có lẽ bạn có thể sống với điều đó, đặc biệt nếu trang vẫn hoạt động với bảng được căn trái. Tôi nghĩ rằng hiện tại người dùng IE5.5 trở xuống đã khá quen với một số trang web trông kỳ quặc - nhưng bạn vẫn cần đảm bảo rằng những trục trặc hình ảnh đó không khiến trang web của bạn không thể sử dụng được.

Chúc bạn viết mã vui vẻ!

CHỈNH SỬA: Xin lỗi, có lẽ tôi nên chỉ ra rằng bạn không cần phải có loại tài liệu "nghiêm ngặt" để đưa IE6 trở lên vào chế độ kết xuất "tiêu chuẩn". Tôi nhận ra có vẻ như vậy từ các ví dụ về loại tài liệu mà tôi đã đăng ở trên. Ví dụ: khai báo loại tài liệu này tất nhiên sẽ hoạt động như nhau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

— Ola Tuvesson
nguồn

2

Mặc dù nó có thể là dị giáo trong thế giới ngày nay - trước đây bạn sẽ thực hiện đoạn mã không phải css sau đây. Điều này hoạt động trên mọi thứ cho đến và bao gồm cả các trình duyệt ngày nay nhưng - như tôi đã nói - nó là dị giáo trong thế giới ngày nay:

<center>
<table>
   ...
</table>
</center>

Những gì bạn cần là một số cách để nói rằng bạn muốn căn giữa một bảng và người đó đang sử dụng trình duyệt cũ hơn. Sau đó chèn các lệnh "<center>" xung quanh bảng. Nếu không - sử dụng css.

Đáng ngạc nhiên là - nếu bạn muốn căn giữa mọi thứ trong vùng BODY - bạn chỉ có thể sử dụng tiêu chuẩn

text-align: center;

lệnh css và trong IE8 (ít nhất) nó sẽ căn giữa mọi thứ trên trang bao gồm các bảng.

— Mark Manning
nguồn

0

style="text-align:center;"

(tôi nghĩ)

hoặc bạn có thể bỏ qua nó, nó vẫn hoạt động

— Steven A. Lowe
nguồn

0

Điều này sẽ hoạt động:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

— Matt Howell
nguồn

0

Tôi chỉ đang học điều này và những gì cuối cùng đã làm việc cho tôi là đầu tiên tạo ra một bảng có ba hàng. Đặt lề cho hàng trái và phải thành 50%. Sau đó, đặt một hàng duy nhất, bảng có chiều rộng cố định bên trong "dữ liệu bảng" của "hàng bảng" trung tâm.

0

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

— Chandra Shekhar Sharma
nguồn

0

Về cơ bản, nó hoạt động giống như,

<table align="center">
...

Tuy nhiên, bạn có thể làm điều đó theo cách tốt hơn bằng cách sử dụng CSS và đây sẽ là một cách tiếp cận tốt hơn để sử dụng CSS vì nó cung cấp hành vi động cho trang web và có tính phản hồi.

  <table style="text-align:center;">

Ngoài ra, nếu bạn chỉ cần hiển thị bảng trên một trang thì bạn có thể chỉ căn chỉnh thẻ body như được hiển thị bên dưới,

 <body style="text-align:center;">
<table>
  ...
</table>

Nếu bạn muốn có bất kỳ đề xuất nào khác, vui lòng cho tôi biết. Chắc chắn sẽ giúp bạn về điều này. Cũng sử dụng các tính năng bootstrap, điều này sẽ dễ dàng và tương tác hơn.

— Gourav Goutam
nguồn

0

Thêm vào kiểu div:

width: fit-content;

— Khaled Mohab
nguồn