văn bản căn chỉnh trên một bảng trong một ô (<table> bên trong <td>)

Question

Đây là điều tôi chưa bao giờ nghĩ: Tôi gặp sự cố trong Firefox và Chrome nhưng hoạt động tốt trong IE!

Nó rất đơn giản, nhưng tôi không hiểu tại sao nó không hoạt động:

Tôi có một bảng bên trong một tế bào, và tôi có style="text-align:right" trên di động, nhưng bảng được ở lại trái trong Firefox và Chrome (trong IE nó ngoan ngoãn đi bên phải ...). Nếu tôi đặt align = right trong thẻ ô thì nó hoạt động, nhưng tôi không muốn làm điều đó.

Mã về cơ bản là:

<table width="1000" border="1" cellpadding="0" cellspacing="0"> 
<tr> 
<td style="text-align:right"> 

<table border="1"> 
<tr><td>Hello</td><td>Hello 2</td></tr> 
</table> 

</td> 

<td>Hello 2</td></tr> 
</table> 

Tôi không muốn bảng lồng nhau là width = 100% hay bất cứ điều gì như thế ...

thể bất cứ ai xin vui lòng giải thích cho tôi tại sao nó doesn' t làm việc, và làm thế nào để sửa chữa nó, và có lẽ lý do tại sao nó hoạt động trong IE nhưng không phải Firefox hoặc Chrome?

Answer 1

Đoán của tôi là Chrome và FF thực sự là những kết quả hiển thị chính xác. text-align có thể không phải ảnh hưởng đến các yếu tố table. Tuy nhiên, áp dụng float:right vào bảng sẽ làm những gì bạn muốn.

Answer 2

Tôi muốn thêm rằng cách CSS để căn chỉnh các bảng liên quan đến vùng chứa của nó là với thuộc tính lề.

Bạn phải thêm margin: 0 auto; nếu bạn muốn căn chỉnh nó vào giữa hoặc margin-left: auto; nếu bạn muốn căn chỉnh nó ở bên phải.

Như @maxedison nói, text-align sẽ chỉ hoạt động với các thành phần inline và inline-block, do đó giải pháp khác sẽ thay đổi bảng bên trong của bạn để lấy một số giá trị hiển thị đó.

Bạn cũng cần nhớ rằng text-align hoạt động từ 'vùng chứa nội dung', điều này có nghĩa là nó thường được áp dụng cho vùng chứa để ảnh hưởng đến nội dung của nó (áp dụng cho p để ảnh hưởng đến nội dung nội tuyến của nó chẳng hạn như văn bản bên trong) và margin: 0 auto hoạt động từ 'content-to-container', có nghĩa là nó thường được áp dụng cho một phần tử khối và ảnh hưởng đến vị trí của nó liên quan đến vùng chứa của nó (được áp dụng cho một số div để đặt nó vào cha mẹ của nó).

Answer 3

Nếu bạn muốn sửa chữa nó (không phải với đầy đủ chức năng), bạn có thể viết này:

table { 
    display: inline-block; 
} 

Điều này làm cho bảng của bạn có thể được tập trung với text-align: center;, nếu áp dụng cho các yếu tố phụ huynh (s).

Answer 4

khi bạn không muốn div để được nổi, bạn có thể thử này: http://jsfiddle.net/NvEZ8/

<div style="text-align:right;"> 
    <table style="display:inline-block"> 
     <tbody> 
     <tr> 
      <td></td> 
      <td>one</td> 
      <td>two</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Dường như text-align (với một html DOCTYPE) chỉ ảnh hưởng đến inline-block trong Chrome và không phải là phần tử chỉ nội tuyến. Thay thế khối nội tuyến theo nội tuyến tại đây và nó không hoạt động được nữa trên Chrome