10/10/2018, 09:57
Khai báo div có thể thay đổi kích thước trong table
Mình có một div và một table
Mình muốn để div đó tại một nơi cụ thể của table. Với khai báo position: relative của div thì việc hiển thị rất đúng.
Tuy nhiên div của mình lại có thể thay đổi kích thước (thu gọn,kéo giãn) nên dẫn tới table cũng bị ảnh hưởng theo...
Mình thấy nếu đổi position: absolute thì khi div thay đổi kích thước sẽ không làm ảnh hưởng tới table. Tuy nhiên việc hiển thị vị trí chính xác của div trên table lại chưa đúng.
Theo các bạn phải xử lý thế nào để vẹn toàn đôi đường.
Thanks!
Mình muốn để div đó tại một nơi cụ thể của table. Với khai báo position: relative của div thì việc hiển thị rất đúng.
Tuy nhiên div của mình lại có thể thay đổi kích thước (thu gọn,kéo giãn) nên dẫn tới table cũng bị ảnh hưởng theo...
Mình thấy nếu đổi position: absolute thì khi div thay đổi kích thước sẽ không làm ảnh hưởng tới table. Tuy nhiên việc hiển thị vị trí chính xác của div trên table lại chưa đúng.
Theo các bạn phải xử lý thế nào để vẹn toàn đôi đường.
Thanks!
Bài liên quan
Tức là div của bạn nằm ngoài table? (<div><table>...</table></div>) hay là nằm trong table? (<table>...<div></div>...</table>)
Như bạn mô tả thì là nằm trong. Như vậy bạn cần xem lại kỹ hơn về cách sử dụng absolute , bạn thử làm như thế này thử:
Gán thuộc tính cho thẻ td bao ngoài thẻ div
Giải thích kỹ hơn: Vì khi một element có thuộc tính position là absolute thì nó nằm ở một tọa độ cố định (absolute nghĩa là tuyệt đối). Như vậy cần chỉ rõ là các tọa độ đó nằm so với element nào, nếu không tìm thấy thì element đó sẽ tính vị trí các tọa độ so với element <body>. Việc gán thuộc tính position = relative là để cho các element có thuộc tính absolute bên trong phải xác định tọa độ so với element đó.
Trường hợp trên thì thẻ div sẽ xác định vị trí so với thẻ td chứa nó. Bạn dùng các thông số top, left, right, bottom để chỉnh tọa độ. Như vậy là được
Hix, tuy nhiên trên FireFox vẫn còn lỗi hiển thị
Muh lỗi này từ lâu rùi bây h bản 3.5 vẫn chưa vá. Hay FF coi như thế là đúng ?!
<html>
<head>
<title>FF error!</title>
</head>
<body">
<table width="350px">
<tr>
<td>
<div id="stable">
Stable
</div>
</td>
<td style="position:relative;z-index: 100;">
<div id="floating" style="width:100px; position:absolute;top: 0px; right: 0px;">
Floating
</div>
</td>
</tr>
</table>
</body>
</html>
Các bạn chạy ở 2 trình duyệt IE và FF sẽ thấy khác biệt: Ở IE thì div có ID floating vẫn nằm trong table ( có width 350px ), còn ở FF thì nó bắn tít sang góc trên,phải của màn hình!
Vừa rùi mình có thử 1 giải pháp. Hơi chuối tí nhưng chạy đc trên cả IE lẫn FF ( div floating kô bị bật khỏi table nhưng vẫn cần căn chỉnh tí để đúng vị trí mình mong muốn ).
...
<td>
<div id="f1" style="position:relative;z-index: 100;">
<div id="floating" style="width:100px; position:absolute;top: -13px; right: 0px;">
Floating
</div>
</div>
</td>
...
(những chỗ tô đậm là code mình thêm vào hoặc sửa )