Lực lượng cột cột cố định chiều rộng mở rộng trên container

Rõ ràng là một vấn đề kinh điển, nhưng "giải pháp" tôi đã tìm thấy đã không hoạt động, bao gồm các câu hỏi khác trên SO.Lực lượng cột cột cố định chiều rộng mở rộng trên container

Nếu bảng của tôi rộng hơn vùng chứa, tôi muốn chiều rộng ô của bảng vẫn cố định và không được thay đổi kích thước để vừa với vùng chứa.

HTML tái sản xuất (<td> s tạo ra với PHP):

<html> 
    <head></head> 

    <body> 
    <table> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { 
      echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
     } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 
</html>

Những gì tôi đã cố gắng:

table-layout:fixed
span container với display:inline-block thiết
div container với khối inline

Có vẻ như có một cách dễ dàng để làm cho mã trước tạo ra một bảng làm tràn cơ thể.

Ai đó có thể trợ giúp?

Sửa

Nó có thể không được rõ ràng từ ngữ trước đây của tôi, nhưng tôi muốn chỉ định cột chiều rộng bản thân mình.

Tôi đang cố gắng thực hiện điều này mà không chỉ định chiều rộng rõ ràng cho bảng. Chỉ có TD sẽ buộc bảng rộng hơn, mà (nên?) Lực lượng container rộng hơn.

Ngoài ra, CSS nội tuyến chỉ có cho mục đích ví dụ.

Nguồn

2011-09-14 Ben

Bố cục bảng: cố định sẽ giải quyết vấn đề. Xóa kiểu nội tuyến bạn cung cấp cho td. Bạn đang chỉ định chiều rộng. Khi bạn không chỉ định chiều rộng cho td, tds được thay đổi kích thước theo nội dung và cho bố cục bảng cố định sẽ không thay đổi kích thước để phù hợp với nội dung – Bala

@Bala - xem chỉnh sửa. Tôi muốn '' s là chiều rộng được đặt. Nếu tôi không đặt chiều rộng trên '' s, thì vấn đề sẽ bị vô hiệu hóa. – Ben

Bạn có thể chia sẻ mã HTML tạo ra hoặc cho tôi biết nếu nó có sẵn trực tuyến để kiểm tra. – Bala

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div style="margin: 0pt auto; width: 980px;"> 
    <div style="500px;overflow:scroll"> 
    <table style="width: 100%; table-layout: fixed;"> 
     <tbody> 
     <tr> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
     </tr> 
     </tbody> 
    </table> 
    <div style="background:chartreuse;width:150px">This is 150px wide.</div> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2011-09-14 02:02:07 Bala

BAM đó là nhờ. Tôi biết có một giải pháp dễ dàng: p Tôi bị thiếu 'width: 100%'. Chúc mừng! Mã có thể tái sản xuất của tôi ở bên dưới, với CSS chính xác. – Ben

Sử dụng HTML của tôi trong câu hỏi của tôi, đây là đánh dấu đúng, lời khen của @Bala.

<html> 

    <head></head> 

    <body> 
    <table style='table-layout:fixed;width:100%'> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 

</html>

Nguồn

2011-09-14 03:23:21 Ben

Lực lượng cột cột cố định chiều rộng mở rộng trên container

Trả lời

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