Làm thế nào tôi có thể thả nổi hai bảng cạnh nhau từ trái sang phải?

Question

Nếu tôi có hai bảng?

<table class="one"> and... <table class="two"> 

Và CSS trông giống như:

table.one { 
    position: relative; 
    float: left; 
} 
table.two { 
    position: relative; 
    float: right; 
} 

Nó không phải là làm việc ...

Answer 1

Không sử dụng vị trí: tương đối, chỉ cung cấp chiều rộng cho mỗi bảng để nổi chính xác.

table.one { 
    float:left; 
    width:45%; 
} 

table.two { 
    width:45%; 
    float:right; 
}​ 

Answer 2

Cố gắng đem lại cho họ một chiều rộng là tốt. 40% mỗi người phải là một thử nghiệm tốt.

Answer 3

Điều gì có nghĩa là nó không hoạt động?

CSS mà bạn có sẽ đặt một bảng ở mỗi bên của phần tử gốc. Nếu bạn đang tìm kiếm chúng được nổi trực tiếp với nhau hơn là ở hai bên đối diện của phụ huynh bạn sẽ muốn 'float: left;' trong cả hai (hoặc ngược lại 'nổi: đúng;' trong cả hai).

Answer 4

Hey nó làm việc tôi cung cấp cho bạn trực tiếp giới thiệu bây giờ kiểm tra này

và bây giờ bạn có thể làm điều hai tùy chọn như như thế này

Lựa chọn một

table.one { 
 
    position:relative; 
 
    float:left; 
 
    border:solid 1px green; 
 
} 
 

 
table.two { 
 
    position:relative; 
 
    float:right; 
 
    border:solid 1px red; 
 
}

<table class="one"> 
 
    <tr> 
 
    <td>hello demo here</td> 
 
    </tr> 
 
</table> 
 

 
<table class="two"> 
 
    <tr> 
 
    <td>hello demo here 2</td> 
 
    </tr> 
 
</table>

---

Lựa chọn hai

<table class="one" align="left" border="1"> 
 
    <tr> 
 
    <td>hello demo here</td> 
 
    </tr> 
 
</table> 
 

 
<table class="two" align="right" border="1"> 
 
    <tr> 
 
    <td>hello demo here 2</td> 
 
    </tr> 
 
</table>

Answer 5

Bạn có thể dễ dàng xác định float: left đến lớp bảng của bạn nó sẽ đến tự động bên cạnh nhau:

table { 
 
    float:left; 
 
    background:yellow; 
 
    margin-left:10px; 
 
}

<table> 
 
    <tr> 
 
     <td>Table 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>blah blah</td> 
 
     <td>blah blah</td> 
 
     <td>blah blah</td> 
 
    </tr> 
 

 
</table> 
 

 
<table> 
 
    <tr> 
 
     <td>Table 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>blah blah</td> 
 
     <td>blah blah</td> 
 
     <td>blah blah</td> 
 
    </tr> 
 
</table>