Chiều rộng bảng CSS - 100% + trừ lề

Question

Tôi đã tình cờ gặp một vấn đề mà tôi không hoàn toàn chắc chắn cách giải quyết.

Tôi có một trang với một số div, một trong số đó chứa một bảng nhưng có lề là 20px. Tôi cần bảng này để 'mông' chống lại phía bên tay phải của một div khác, mà tôi đã hoàn thành bằng cách sử dụng lề của -20px - hoạt động như tôi hy vọng. Vì div này (bao gồm toàn bộ bên phải của trang) là chất lỏng, bảng có chiều rộng là 100%.

Trong khi phía bên tay trái của bảng là nơi tôi muốn, mặt bên phải bây giờ là 20px ngắn của tất cả mọi thứ khác.

Có cách nào tôi có thể giữ lề âm ở bên phải, mà không cần di chuyển bảng 20px từ bên phải không? Tôi đã thử một vài điều mà không thành công. CSS bảng của tôi được dán bên dưới.

.pricetable { 
    width:100%; 
    margin-left: -20px; 
    padding: 5px; 
} 

Answer 1

Bạn hoàn toàn có thể định vị bảng của mình để bảng được căn chỉnh ở bên phải.

position: absolute; 
right: 0; 

Không có cách nào để thêm lề trái mà không di chuyển bảng vì bảng bù được tính theo cách này: margin + padding + width = offset width.

Khi bạn đặt chiều rộng là 100%, lề và phần đệm làm cho phần tử mở rộng.

• Padding (trái) X, (bên phải) y + width = over 100%
• over 100% + chiều rộng tiêu cực (X + y) = 100%.

Định nghĩa đầu tiên thêm một số phần đệm ở mỗi bên của bảng. Định nghĩa thứ hai chuyển bảng sang bên trái, bởi vì nó là một lề âm.

Answer 2

thử cho bảng bố trí: cố định và xem

Answer 3

Bạn cũng có thể thiết lập độ rộng đến dưới 100% và thiết lập tự động margin:

.pricetable { 
    width:90%; 
    margin: auto; 
} 

Hy vọng nó giúp.

Answer 4

Giải pháp của tôi là bọc bảng bên trong div với lề âm.

<div style="margin-right:-20px"> 
    <table style="width:100%"> 
    ... 
    </table> 
</div> 

Answer 5

bây giờ có thể với CSS calc:

.pricetable { 
    width: calc(100% - 20px); 
    margin-left: -20px; 
    padding: 5px; 
}