Hai bảng HTML cạnh nhau, căn giữa trên trang

Question

Tôi có hai bảng trên một trang mà tôi muốn hiển thị cạnh nhau, sau đó căn giữa chúng trong trang (thực sự nằm trong div khác, nhưng đây là cách đơn giản nhất tôi có thể đưa ra):

<style> 
    #outer { text-align: center; } 
    #inner { text-align: left; margin: 0 auto; } 
    .t { float: left; } 
    table { border: 1px solid black; } 
    #clearit { clear: left; } 
</style> 

<div id="outer"> 
    <p>Two tables, side by side, centered together within the page.</p> 

    <div id="inner"> 
    <div class="t"> 
     <table> 
     <tr><th>a</th><th>b</th></tr> 
     <tr><td>1</td><td>2</td></tr> 
     <tr><td>4</td><td>9</td></tr> 
     <tr><td>16</td><td>25</td></tr> 
     </table> 
    </div> 

    <div class="t"> 
     <table> 
     <tr><th>a</th><th>b</th><th>c</th></tr> 
     <tr><td>1</td><td>2</td><td>2</td></tr> 
     <tr><td>3</td><td>5</td><td>15</td></tr> 
     <tr><td>8</td><td>13</td><td>104</td></tr> 
     </table> 
    </div> 

    </div> 
    <div id="clearit">all done.</div> 
</div> 

tôi hiểu rằng nó là cái gì để làm với thực tế là các bảng đang nổi, nhưng tôi đang ở một mất mát như để hiểu những gì tôi đang mất tích. Có rất nhiều trang web mô tả một cái gì đó giống như kỹ thuật tôi trình bày ở đây, nhưng trong mọi trường hợp nó không hoạt động; các bảng bám chặt vào lề trái.

Answer 1

Tắt đầu của tôi, bạn có thể thử sử dụng "margin: 0 auto" cho #outer chứ không phải #inner.

Tôi thường thêm màu nền cho các DIV của mình để xem cách chúng được đặt trên chế độ xem. Đó có thể là một cách tốt để chẩn đoán những gì đang xảy ra ở đây.

Answer 2

Vấn đề là DIV sẽ căn giữa các bảng của bạn không có chiều rộng được xác định. Theo mặc định, DIV là các phần tử khối và chiếm toàn bộ chiều rộng của bố mẹ - trong trường hợp này là toàn bộ tài liệu (truyền qua #outer DIV), do đó, kiểu ký tự tự động không có hiệu lực.

Để kỹ thuật này hoạt động, bạn chỉ cần đặt độ rộng của div có lề: tự động thành bất kỳ mục nào trừ "tự động" hoặc "kế thừa" (giá trị pixel cố định hoặc phần trăm).

Answer 3

Cung cấp cho div bên trong của bạn một chiều rộng.

VÍ DỤ

Thay đổi CSS của bạn:

<style> 
#outer { text-align: center; } 
#inner { text-align: left; margin: 0 auto; } 
.t { float: left; } 
table { border: 1px solid black; } 
#clearit { clear: left; } 
</style> 

Để này:

<style> 
#outer { text-align: center; } 
#inner { text-align: left; margin: 0 auto; width:500px } 
.t { float: left; } 
table { border: 1px solid black; } 
#clearit { clear: left; } 
</style> 

Answer 4

Vấn đề là bạn cần phải cung cấp cho #inner một bộ width (bất cứ điều gì nhưng auto hoặc inherit). Thủ thuật margin: 0 auto; chỉ hoạt động nếu phần tử bên trong hẹp hơn phần tử thùng chứa của nó. Nếu không được cấp width, #inner sẽ tự động mở rộng đến toàn bộ chiều rộng #outer, làm cho nội dung của nó bị tuôn ra trái.

Answer 5

Nếu là tôi - tôi sẽ làm một cái gì đó như thế này:

<style type="text/css" media="screen"> 
table { border: 1px solid black;float:left;width:148px;} 
#table_container{width:300px;margin:0 auto;} 
</style> 

Với bàn như:

<div id="table_container"> 
    <table> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td>16</td> 
     <td>25</td> 
    </tr> 
    </table> 
    <table> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td>16</td> 
     <td>25</td> 
    </tr> 
    </table> 
</div> 

Answer 6

<style> 
#outer { text-align: center; } 
#inner { width:500px; text-align: left; margin: 0 auto; } 
.t { float: left; width:240px; border: 1px solid black;} 
#clearit { clear: both; } 
</style> 

Answer 7

Thật không may, tất cả các giải pháp này dựa vào cách xác định một chiều rộng cố định . Vì các bảng được tạo động (các kết quả thống kê được lấy từ một cơ sở dữ liệu), chiều rộng không thể được biết trước.

Các kết quả mong muốn có thể đạt được bằng cách quấn hai bảng trong bảng khác:

<table align="center"><tr><td> 
//code for table on the left 
</td><td> 
//code for table on the right 
</td></tr></table> 

và kết quả là một cặp hoàn hảo làm trung tâm của bảng trả lời trôi chảy đến độ rộng tùy ý và trang (tái) kích thước (và thuộc tính bảng align = "center" có thể được đưa vào div bên ngoài với ô tô lề).

Tôi kết luận rằng có một số bố cục chỉ có thể đạt được với bảng.

Answer 8

Tôi nhận ra đây là một câu hỏi cổ xưa, nhưng dù sao đi nữa.

Sau đây sẽ hoạt động trong trình duyệt tuân thủ và IE8 ở chế độ tiêu chuẩn (tức là với bộ tài liệu).

#inner {text-align:center;} 
.t {display:inline-block;} 

Thật không may, thực sự không có cách nào để tinh chỉnh nó hoạt động trong IE6. Đối với IE7, việc thêm zoom: 1 vào div .t (thông qua nhận xét có điều kiện) có thể giúp ích, nhưng tôi không có sẵn IE7 để thử nghiệm vào lúc này.