bảng HTML chiều rộng đầy đủ với lề

Vì vậy, tôi có một bảng:bảng HTML chiều rộng đầy đủ với lề

<table border=1> 
    <caption>This is a table.</caption> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
     <th>Three</th> 
    </tr> 
    <tr> 
     <td>Four</td> 
     <td>Five</td> 
     <td>Six</td> 
    </tr> 
</table>

và tôi muốn nó được như rộng càng tốt trong khi vẫn để lại một lề 20px ở mỗi bên. Vì vậy, tôi đã thực hiện điều này:

table{ 
    border-collapse:collapse; 
    margin:20px; 
    padding:0; 
    width:100%; 
}

nhưng nó kết thúc bằng chiều rộng của dấu cộng và thêm 20px bên trái, làm cho thanh cuộn dọc xuất hiện. Có cách nào để làm cho nó ít hơn 40px chiều rộng của cha mẹ mà không cần thêm một yếu tố khác để bao quanh nó?

jsfiddle: http://jsfiddle.net/pvHNM/

Nguồn

2012-01-11 John Stimac

thể trùng lặp của [Div chiều rộng 100% trừ đi số tiền cố định của pixel] (http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) – Gajus

sử dụng calc() để tính chiều rộng dự định:

table { 
    margin: auto; 
    width: calc(100% - 40px); 
}

http://jsfiddle.net/EXS76/1/

Nguồn

2014-07-23 19:03:36 Michael

Thật dễ dàng để quên rằng bây giờ là OK để sử dụng một số tính năng mới này. http://caniuse.com/#search=calc –

@MichaelCordingley đồng ý, những người học hỏi cảm thấy lạ khi kết hợp một tính năng CSS mới với trường cũ

– Michael

Bằng quy tắc CSS, các width sở hữu bộ chiều rộng của nội dung của một phần tử, vì vậy bạn đang đòi hỏi 100% chiều rộng có sẵn được phân bổ cho các bảng riêng của mình và một số bổ sung không gian được phân bổ cho các lề. Điều này chắc chắn gây ra cuộn ngang.

Giải pháp thay thế, bạn có thể bọc bảng bên trong một phần tử div và đặt margin trên đó.

Nguồn

2012-01-11 01:08:53

Bạn có thể đặt phần đệm trên phần tử bảng. Các thead, tbody và tfoot và hàng bên trong sẽ lấp đầy không gian trong bảng.

table 
{ 
    border-collapse:collapse; 
    padding:20px; 
    margin:0; 
    width:100%; 
}

Nguồn

2013-02-27 12:35:13 Victor

thông minh và thông minh –

Dường như điều này không hoạt động (nữa?): https://jsfiddle.net/kvpupvo8/1/ – BurninLeo

Tôi tìm thấy câu trả lời tốt nhất hữu ích, nhưng nó không hoạt động trong các trình duyệt cũ. Điều phù hợp nhất với tôi là một DIV bên ngoài bảng thiết lập lề. Sau đó, chiều rộng 100% của bố mẹ sẽ bị ảnh hưởng bởi div này, chứ không phải phần tử cha.

<div style="margin"> 
    <table style="width:100%"> 
    </table> 
</div>

Nguồn

2015-04-14 17:32:32 LucasJohn

-1

Làm thế nào về việc sử dụng một shim để bàn trải dài đến toàn bộ chiều rộng của container như một div sẽ, không chắc chắn về khả năng tương thích?

table:after { 
    content: "i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i"; 
    display: block; 
    height: 0em; 
    visibility: hidden; 
}

Nguồn

2016-03-02 06:11:29

Các vấn đề liên quan

bảng HTML chiều rộng đầy đủ với lề

Trả lời

Các vấn đề liên quan