Làm cách nào để tạo một bảng HTML có cùng chiều rộng với thẻ div chứa?

Tôi có một bảng bên trong một div. Tôi muốn bảng chiếm toàn bộ chiều rộng của thẻ div.Làm cách nào để tạo một bảng HTML có cùng chiều rộng với thẻ div chứa?

Trong CSS, tôi đã đặt chiều rộng của bảng thành 100%. Thật không may, khi div có một số lợi nhuận trên nó, bảng kết thúc lên rộng hơn div nó ở.

Tôi cần hỗ trợ IE6 và IE7 (vì đây là một ứng dụng nội bộ), mặc dù tôi rõ ràng là hoàn toàn giải pháp trình duyệt chéo nếu có thể!

Tôi đang sử dụng DOCTYPE sau ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sửa: Đáng tiếc là tôi không thể mã hóa cứng chiều rộng như tôi đang tự động tạo HTML và nó bao gồm làm tổ các div đệ quy bên trong nhau (với lề trái trên mỗi div, điều này tạo ra hiệu ứng 'lồng nhau' đẹp).

Nguồn

2008-09-16 Chris Roberts

Các công trình sau đây dành cho tôi trong Firefox và IE7 ... hướng dẫn, mặc dù là: nếu bạn đặt chiều rộng trên một phần tử, không đặt lề hoặc đệm trên cùng một phần tử. Điều này giữ đúng đặc biệt là nếu bạn đang trộn các đơn vị - giả sử, trộn phần trăm và pixel.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div style="width: 500px; background-color:#F33;"> 
     This is the outer div 
     <div style="background-color: #FAA; padding: 10px; margin:10px;"> 
     This is the inner div 
     <table cellpadding="0" cellspacing="0" style="width: 100%"> 
      <tr> 
      <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

Xem here để biết ví dụ.

Nguồn

2008-09-16 17:18:24 Nate

Sau khi nói không đặt chiều rộng và lợi nhuận trên cùng một nguyên tố, bạn làm chính xác điều đó ví dụ div của bạn. Chỉ cần tò mò tại sao? – Kane

Bạn nói đúng. Tôi không nhớ! Có lẽ tôi muốn theo dõi đánh dấu mà tôi nghĩ OP đang sử dụng? Tôi sẽ chỉnh sửa. – Nate

Trong trường hợp bạn tự động tạo mã có thể có lề trên đó, việc thêm một yếu tố đơn giản, không bị cản trở <div> bao quanh bảng của bạn có thể thực hiện thủ thuật.

Nguồn

2008-09-16 17:26:59 Nate

Đó là vấn đề lớn với cách CSS xử lý thuộc tính chiều rộng và lý do Microsoft triển khai mô hình hộp khác nhau lúc đầu. Microsoft bị mất, và bây giờ nó hoặc là chiều rộng hoặc lề/padding/biên giới cho một phần tử.

Tình hình có thể thay đổi để tốt hơn trong CSS3 với box-sizing property

Nguồn

2008-09-16 17:39:19

Tôi luôn sử dụng <table width="100%">

Nguồn

2008-09-16 17:57:17

Phải. Nó là dễ dàng. Chỉ cần sử dụng CSS như '# my-parent-div table {margin: 100%;}' –

Có lẽ bài viết này rộng khoảng Internet Explorer and the CSS box model sẽ giúp?

Nguồn

2008-09-16 18:18:17

thử điều này:

div { 
padding: 0px; 
} 

table { 
    width: 100%; 
    margin: 0px; 
}

bằng cách thiết lập padding của div bằng không, bạn sẽ loại bỏ các khoảng trống giữa biên giới của div và nội dung của nó. bằng cách đặt chiều rộng của bảng thành 100% và lề của nó là 0, bạn sẽ loại bỏ khoảng trống giữa các đường viền của bảng và vùng chứa của nó.

Nguồn

2008-09-16 19:53:57 farzad

Độ rộng dựa trên tỷ lệ phần trăm so với phần tử gốc đầu tiên có chiều rộng được chỉ định. Nếu div của bạn không có chiều rộng được chỉ định thì chiều rộng của bảng không có gì để làm với nó. Bạn có thể đăng một phiên bản đơn giản của đánh dấu cho thấy cây DOM của bạn trông như thế nào không?

Từ góc độ khác, nếu div cha mẹ của bạn có độ rộng được đặt và lề vẫn ảnh hưởng đến bảng của bạn thì có thể bạn đang ở chế độ quirks. Bạn đã chỉ định DOCTYPE của mình, nhưng lưu ý rằng phần tử DOCTYPE PHẢI là dòng đầu tiên trong tệp.Một cái gì đó khác cần lưu ý khi xử lý IE6, theo mặc định, nếu nội dung của bạn rộng hơn cha mẹ của bạn, cha mẹ sẽ được kéo dài để chứa, bạn có thể ngăn chặn điều này bằng cách thêm tràn: ẩn vào css của bạn cho phần tử cha nhưng trong quá trình bạn có thể che khuất một số nội dung của phần tử con.

Nguồn

2008-09-16 20:17:52

Không thực sự chắc chắn vấn đề là gì - điều này hoạt động tốt trong IE6/7 và FF3. Thiết lập chiều rộng của phần tử DIV .container đặt chiều rộng của bảng. Thêm lề vào div .container không ảnh hưởng đến bảng. Có thể có điều gì khác trong đánh dấu/CSS của bạn đang ảnh hưởng đến bố cục?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
     <title>Boxes and Tables</title> 
     <style type="text/css"> 

     div.container { 
      background-color: yellow; 
      border: 1px solid #000; 
      width: 500px; 
      margin: 5px auto; 
     } 

     table.contained { 
      width: 100%; 
      border-collapse: collapse; 
     } 

     table td { 
      border: 2px solid #999; 
     } 

     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <table class="contained"> 
       <thead> 
        <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr> 
       </thead> 
       <tbody> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

Nguồn

2008-09-17 15:44:14

Ngẫu nhiên, có lý do chính đáng để bạn không sử dụng loại tài liệu nghiêm ngặt không? nghiêm ngặt phải luôn là mặc định. chuyển tiếp chỉ dành cho mã kế thừa.

Nguồn

2008-09-17 15:48:06

Tôi đã tìm ra trung tâm của vấn đề ở đây. Nó phải làm với sự sụp đổ biên giới. Tôi đã có cùng một vấn đề này trong một thời gian. Vì các bảng thường có đường viền mỏng nên vấn đề không hiển nhiên đối với hầu hết mọi người. Nếu bạn đặt một bảng thông thường với chiều rộng được đặt thành 100% bên trong một div, như Nate có, bạn sẽ ổn.

Tuy nhiên, nếu bạn chỉ định thu hẹp đường viền: thu gọn trên bảng, bảng sẽ thoát ra khỏi div. Điều này là không rõ ràng đối với hầu hết mọi người bởi vì nó chỉ có thể thoát ra bởi một điểm ảnh, hoặc tùy thuộc vào bối cảnh nó trong và tác nhân người dùng, có lẽ không có gì cả.

Để làm rõ hơn những gì đang diễn ra, hãy thử cách này: Đặt ví dụ của Nate bên cạnh ví dụ của David Heggie trong tệp html.

Dường như cả hai đều hoạt động tốt. Nhưng bây giờ, thay đổi phong cách TD nội tuyến của Nate thành "border: 40px solid blue". Thay đổi phong cách bảng td của David thành "border: 40px solid # 999;". Tại thời điểm này, bảng của David đã phá vỡ div bởi 50% biên giới của nó ở mỗi bên. Nate vẫn hoạt động. Đặt đường viền sụp đổ: kiểu thu gọn trên bảng của Nate và giờ nghỉ của anh ấy cũng vậy.

Đó là sự sụp đổ biên giới đang gây ra lỗi!

Nguồn

2009-03-16 14:53:25 Chris

Các mã sau đây hoạt động trên IE6/8, Chrome, Firefox, Safari:

<style type="text/css"> 
    div.container 
    { 
     width: 500px; 
     padding: 10px; 
     margin: 10px; 
     border: 1px solid red; 
    } 
    table.contained 
    { 
     width: 100%; 
     border: 1px solid blue; 
    } 
</style> 

<div class="container"> 
    <table class="contained"> 
    <tr> 
     <td>Hello</td><td>World</td> 
    </tr> 
    </table> 
</div>

copy Hãy thử và dán và xây dựng trên đó (chỉ cần di chuyển một phần phong cách cho tiêu đề hoặc vào một tập tin .css riêng), có lẽ cách bạn sử dụng việc đặt nội tuyến CSS (sử dụng thẻ kiểu) có liên quan đến vấn đề, hoặc đó là một số CSS khác xung quanh các khối bảng div? Nổi cũng có thể gây rắc rối.

P.S. Tôi đặt đường viền màu đỏ và màu xanh lam để xem các khu vực mở rộng đến để kiểm tra trực quan hơn.

Nguồn

2010-10-11 16:36:16 Nestor

tràn: tự động; trên div ngoài cùng có thể giúp đỡ nếu bạn đang nhìn thấy những điều kỳ lạ - như div ngoài cùng nhỏ hơn bạn muốn nó hoặc không chiếm toàn bộ kích thước của các div bên trong nó.

Nguồn

2012-10-16 03:36:41 William

Thêm CSS dưới đây để <table> của bạn:

table-layout: fixed; 
width: 100%;

Nguồn

2015-02-20 05:58:56

Làm cách nào để tạo một bảng HTML có cùng chiều rộng với thẻ div chứa?

Trả lời

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