it-swarm-vi.tech

Làm thế nào để làm cho chúng ta có thể làm được

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.

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ề trên đó, bảng kết thúc rộng hơn so với div.

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

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

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

Chỉnh sửa: Thật không may, tôi không thể mã hóa độ rộng khi tôi tạo HTML một cách linh hoạt và nó bao gồm việc lồng các div theo cách đệ quy vào 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 ).

19
Chris Roberts

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

table-layout: fixed;
width: 100%;
11
Sharad Biradar

Tuy nhiên, phần sau đây hoạt động với tôi trong Firefox và IE7 ... một hướng dẫn là: nếu bạn đặt chiều rộng cho một phần tử, đừng đặt lề hoặc phần đệm trên cùng một phần tử. Điều này đúng đặc biệt nếu bạn 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 ở đây cho một ví dụ.

7
Nate

Độ rộng dựa trên tỷ lệ phần trăm liên quan đến phần tử cha đầ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 liên quan gì đến 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ừ một góc độ khác, nếu div cha mẹ của bạn có bộ chiều rộng và lề vẫn ảnh hưởng đến bảng của bạn thì có lẽ 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 điều 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ể dừng điều này bằng cách thêm overflow: hidden vào css 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. 

4
Eric DeLabar

Không thực sự chắc chắn vấn đề ở đây là gì - điều này hoạt động tốt trong IE6/7 và FF3. Đặt 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ó lẽ có điều gì khác trong đánh dấu/CSS của bạn ả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>
3
David Heggie

Tôi đã tìm ra trung tâm của vấn đề ở đây. Nó phải làm với border-collapse. Tôi đã có vấn đề tương tự trong một thời gian. Vì các bảng thường có viền mỏng, vấn đề không rõ ràng đố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 div, như Nate có, bạn sẽ ổn.

Tuy nhiên, nếu bạn chỉ định border-collapse:collapse trên bảng, bảng sẽ thoát ra khỏi div. Điều này 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 pixel hoặc tùy thuộc vào bối cảnh của nó và tác nhân người dùng, có lẽ không phải vậy.

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

Nó sẽ trông giống như cả hai hoạt động tốt. Nhưng bây giờ, hãy thay đổi kiểu TD của Nate thành border: 40px solid blue. Thay đổi kiểu td bảng của David thành border: 40px solid #999;. Tại thời điểm này, bàn của David thoát ra khỏi div bằng 50% đường viền của nó ở mỗi bên. Nate vẫn hoạt động. [.__.] Đặt kiểu border-collapse:collapse trên bàn của Nate và giờ nghỉ của anh ấy cũng vậy.

Đó là border-collapse gây ra nó!

2
Chris

Trong trường hợp bạn tự động tạo mã có thể có lề trên đó, việc thêm một phần tử <div> đơn giản, không bị che khuất bao bọc bảng của bạn có thể thực hiện thủ thuật.

1
Nate

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

1
Joe Morgan

Đoạn mã sau 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>

Hãy thử sao chép và dán và xây dựng trên nó (chỉ cần di chuyển phần kiểu sang tiêu đề hoặc sang tệp .css riêng), có thể cách bạn sử dụng để đặt CSS nội tuyến (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ể cho rắc rối.

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

0
Nestor

Có lẽ bài viết mở rộng này về Internet Explorer và mô hình hộp CSS sẽ giúp?

0
Christian Davén

Đó 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 đã mất và bây giờ, đó là chiều rộng hoặc lề/phần đệm/đường viền cho một phần tử. 

Tình huống có thể thay đổi để tốt hơn trong CSS3 với thuộc tính kích thước hộp

0
buti-oxa

tràn: tự động; trên div ngoài cùng có thể giúp ích 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 hoặc không chiếm toàn bộ kích thước của các div bên trong nó.

0
William

thử đi:

div {
 padding: 0px;
}

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

bằng cách đặt phần đệm của div thành 0, bạn sẽ xóa khoảng trắng giữa các viền 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ó bằng 0, bạn sẽ xóa khoảng cách giữa các đường viền của bảng và thùng chứa.

0
farzad

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

0
Konrad Rudolph