帶CSS的響應式表格列

Question

有三列的表格，第一個和最後一個是固定的，中間的一個應該是流動的。

問題 - 在中間欄內有文字nowrap，它可以防止它變得流暢。

這怎麼辦？

它的外觀的頁面寬度（正確的行爲）上：

應該如何看待窄頁：

它是如何看起來窄頁面上（不正確的行爲，請參閱滾動條）：

代碼https://jsfiddle.net/8c9msa71/

td { 
 
    border: 1px solid black; 
 
} 
 

 
.fluid { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<table> 
 
    <tr> 
 
    <td>first</td> 
 
    <td class="fluid">very-very-very-very-very-very-long-second-text</td> 
 
    <td>third</td> 
 
    </tr> 
 
</table>

Answer 1

您可以通過添加一個div

td { border: 1px solid black; } 
 
.fluid { position: relative; width: 70%;} 
 
.fluid div { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    position: absolute; 
 
    left: 5px; 
 
    right: 5px; 
 
    top: 0; 
 
}

<table width="100%"> 
 
    <tr> 
 
    <td>first</td> 
 
    <td class="fluid"> 
 
    <div>very-very-very-very-very-very-long-second-text</div> 
 
    </td> 
 
    <td>third</td> 
 
    </tr> 
 
</table>

做

Answer 2

我注意到添加div的解決方案。

如果您不想或需要添加div，則可以使用max-width。

說明： 您的第一個問題是您的元素沒有設置寬度屬性。首先，我將設置「非常非常長的第二文本」的最大寬度。例如，您可以將max-width: 60vw;添加到您的.fluid。如果您對vw語法不熟悉，請在此處閱讀更多內容：https://www.w3.org/TR/css3-values/#vw

通過只添加它，您幾乎就會在那裏。您仍然還有一個問題：在非常小的設備/分辨率下，您注意到第三個表格數據<td></td>將從可見區域消失。

而不是摺疊所有的內容，我建議在您的表格數據<td></td>上使用display: inline-block;。這樣做只要內聯足夠的空間就可以在線顯示錶格數據。另外，一小部分信息將可見，而不是可見的NO信息的結果。當可用區域變小（即調整窗口大小）時，它們將開始逐一跳下。

完全CSS：

td { 
    border: 1px solid black; 
    display: inline-block; 
} 

.fluid { 
    max-width: 60vw; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}