寬度為100％的元素溢出父級

Question

現在，我已經花了幾個小時來嘗試使用這個簡單的（！）html代碼。.但是％＃！¤無法使其按我的意願工作。

網址

http://www.bluemachines.dk/html_test/

問題

如果您查看鏈接，則可以看到寬度為1000px的灰色div aprox。這就是頁面的寬度。

在div中，有一個包含3列標題的表格：Dato，Bilagsnr，Bilag

在最后一列“ Bilag”中，有多個元素，包括導致問題的圖像。 元素的寬度設置為100％，但以某種方式“溢出”父元素的寬度

只要顯示圖像，就會將前兩列“ Dato”和“ Bilagsnr”混搭起來。

如果右鍵單擊圖像元素<div id="e9900" ...並檢查該元素並設置display:none所有內容都放置在適當的位置e9900也具有overflow:hidden ，並且圖像本身可在父元素中拖動顯示適合的大圖像。這就是它的外觀，但是一旦顯示了圖像元素，寬度就混亂了

不能真正知道發生了什么，因為圖像元素的寬度設置為width:100% ..是的，您可以將圖像的寬度設置為確切的寬度，但這不是我想要的。.設計必須不是靜態和鎖定的

Answer 1

將此樣式屬性添加到表格標記中style =“ table-layout：fixed;”

.......
<div id="header_module">
  <table class="list_header" data-table="enclosure" >
    colgroup> … </colgroup>
...... 

中線將變成這樣

<table class="list_header" data-table="enclosure" style="table-layout: fixed;">

資料來源： http : //www.w3schools.com/CSSref/pr_tab_table-layout.asp

Answer 2

在這種情況下， div#e9965和img#e9966的width均為100% 。

我不確定您要對圖像做什么，即。 應該如何放置在父級中，但這至少可以修復溢出部分，並可以修復左上角的“ Dato”和“ Bilagsnr”外觀。