Trong CSS, làm cách nào để tôi có thể mở rộng bảng để điền vào div vùng chứa?

Question

Tôi muốn "khắc" các khoảng trống trên màn hình bằng cách tạo một số vùng chứa DIV, sau đó điền nội dung vào từng DIV. trong một trường hợp, tôi cần phải điền vào một bảng.

phần trong cùng của bảng là jpeg <img>. Tôi không muốn sử dụng kích thước pixel cố định ở bất kỳ đâu, để nội dung sẽ thu nhỏ độc đáo trong các trình duyệt có kích thước khác nhau.

Sau khi thử và lặp lại nhiều lần, và một số đọc trên internet, tôi đã tìm ra rằng để cho toàn bộ chuỗi container-div ---> bảng -> tbody -> tr -> td -> img phù hợp với kích thước độc đáo, tôi phải đảm bảo rằng mỗi phần tử trong số này có các thuộc tính sau đây "height:100%; width:100; position:relative" (chính vị trí img có thể là tuyệt đối).

Điều này làm việc tốt với một bảng chỉ 1 hàng. nhưng nếu tôi có nhiều hàng, có vẻ như chiều cao hàng được tính một cách ngây thơ từ cha mẹ của nó, đó là tbody, bởi vì nếu tôi có 2 hàng, mỗi hàng vẫn cao bằng tbody. nhưng ngay cả sau khi tôi chia chiều cao TR bằng 2 theo cách thủ công, nó không chính xác phù hợp với vùng chứa.

Vậy làm thế nào tôi có thể làm cho bảng tự động thu hẹp đối với vùng chứa xung quanh?

<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 


<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 
#bottom-banner table { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner div { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner img { 
height:100%; 
position:absolute; 
right:0; 
left:0; 
margin:auto; 
top:0; 
bottom:0; 
width:auto; 
} 
</style> 

<div id="bottom-banner"> 

<table><tbody> 
<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

</tbody></table> 
</div> 

Answer 1

Chỉ cần đặt chiều rộng và chiều cao của bảng thành 100%. Nhưng div cha của bảng phải có chiều cao được gán nếu các ô trống, chúng sẽ không chiếm bất kỳ không gian dọc nào mà không có chiều cao được chỉ định.

div { width: 100%;height: 500px;border: 5px yellow solid; } 
 
table { width: 100%;height: 100%;border: 3px red double; }

<div> 
 
    <table> 
 
    <tr> 
 
     <td bgcolor="#2062AF"></td> 
 
     <td bgcolor="#05BDB0"></td> 
 
     <td bgcolor="#FEFCC2"></td> 
 
     <td bgcolor="#FAA72A"></td> 
 
     <td bgcolor="#CD3450"></td> 
 
    </tr> 
 
    </table> 
 
</div>