將最後一列的寬度設置爲總父容器寬度的其餘部分

Question

我想要實現4列布局，其中前3列爲動態文本（小或略大，因此不確定其寬度）。我希望第四列寬度作爲前三列的寬度的其餘部分。例如，如果父容器是200px，前3列內容需要120px，那麼我的第4列應該自動爲80px，我想在其中應用文本溢出。

我正在嘗試這與表，但我卡住，並沒有得到什麼要做。這裏是我的嘗試 - JSFiddle

<div> 
    <table> 
    <tr> 
     <td class="shrink">Dynamic text</td> 
     <td class="shrink">Dynamic text</td> 
     <td class="shrink">Dynamic text</td> 
     <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td> 
    </tr> 
    </table> 
</div> 

我很新的CSS3 flex或CSS3 Grid但如果可以與可以輕鬆實現，那麼我會很高興的使用它。

UPDATE

我想柱之間的空間是5px的每個列。這將與文本內容無關。其多頭或空頭。此外，我不希望任何內容下降到下一行，因此我將使用white-space:nowrap。

Answer 1

你可以做這樣的事情，與font-size屬性和first-line僞元素播放。原文實際上是仍然存在，但你不能看到它... ...

table { 
 
    border: 1px solid green; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    font-size: 12pt; 
 
} 
 

 
table td { 
 
    border: 1px solid green; 
 
} 
 

 
table td.shrink { 
 
    white-space: nowrap 
 
} 
 

 
table td.expand { 
 
    width: 100%; 
 
    font-size: 0.01em; 
 
    word-break: break-all; 
 
    position: relative; 
 
    padding-right: 100em; 
 
} 
 

 
table td.expand:first-line { 
 
    font-size: 100em; 
 
    float: left; 
 
} 
 

 
table td.expand:after { 
 
    content: "\2026"; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    width: 1em; 
 
    font-size: 100em; 
 
    height: 100%; 
 
} 
 

 
div { 
 
    border: 1px solid green; 
 
    width: 500px 
 
}

<div> 
 
    <table> 
 
    <tr> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

我希望這有助於你...

table { 
 
    border: 1px solid green; 
 
    border-collapse: collapse; 
 
    width:100%; 
 
} 
 

 
table td { 
 
    border: 1px solid green; 
 
    max-width: 0; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
table td.shrink { 
 
    width: 20%; 
 
} 
 
table td.expand { 
 
    width: 40%; 
 
} 
 
div { 
 
    border: 1px solid green; 
 
    width: 500px 
 
}

<div> 
 
    <table> 
 
    <tr> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="shrink">Dynamic text</td> 
 
     <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td> 
 
    </tr> 
 
    
 
</table> 
 
</div>

Answer 3

只需將寬度設置爲容器，桌子和前三欄，然後自動最後一列將承擔的剩餘部分容器。這是一個工作示例。我希望這是你正在尋找的。

.container { 
 
    width: 1000px; 
 
} 
 

 
.container table { 
 
    width: 100%; 
 
} 
 

 
.container table tr td { 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
.container table tr td.shrink { 
 
    /*width: 120px;*/ 
 
}

<div class="container"> 
 
    <table> 
 
     <tr> 
 
      <td class="shrink">Dynamic text</td> 
 
      <td class="shrink">Dynamic text</td> 
 
      <td class="shrink">Dynamic text</td> 
 
      <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td> 
 
     </tr> 
 
    </table> 
 
</div>