針對一個特定列的靈活列寬度

我有一個表格的單元格內容不應包裝在多行上。針對一個特定列的靈活列寬度

我想讓表格適應顯示一些單元格的全部內容（id，value和actions，在我下面的例子中）。

我希望其他單元格佔用剩餘空間並隱藏溢出。

你認爲這是可能的嗎？

下面是一個示例小提琴。

沒有CSS：一切都包裝在2行上，這是不正確的。
無結論：表格變得太寬，我想截斷描述單元格。

https://jsfiddle.net/user280767/pfeL3bwk/

table.ex-2 td { 
    white-space: nowrap; 
} 

table.ex-2 td.descr { 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2016-04-22 user280767

你是這樣的嗎？ https://jsfiddle.net/pfeL3bwk/1/ –

接近，但我不希望描述在多行上。我希望它被截斷（只能看到帶有省略號的文本的開頭「...」） – user280767

您的意思是說您將修復表格寬度，然後說明部分將在單元格中顯示之後截斷。 –

只需使用。

查看修改後的JSFiddle。

MDN Article on table-layout。

在爲表格設置了固定寬度後，可以設置列寬度，例如，使用col標記或直接將寬度設置爲th。

看到這個JSFiddle。

如果你想table使用所有的寬度，那麼只要給它width: 100%;或保留它的默認（沒有規則的寬度）。

來源

2016-04-22 10:09:39 Green

好吧，我試過了，它不完全是我想要的。有了這個解決方案，我必須修復各個列的寬度。然而，我不知道他們將採取什麼樣的寬度，我希望它是由他們的內容設置的。 – user280767

@ user280767閱讀關於MDN（上面的鏈接）或[W3Schools]（http://www.w3schools.com/cssref/pr_tab_table-layout.asp）的文章。那麼你有幾個解決方案。運行將設置正確寬度的腳本。 **標準化你的桌子**（這要感謝你確實知道每列的最大寬度是多少;不要做太籠統或太完美的風格 - 這是不可能的，這是一個壞習慣）。或者使用'flex'而不是表格。 – Green

感謝您的有用評論。我決定添加一些JavaScript（角度指令）來幫助我達成目標。 – user280767

針對一個特定列的靈活列寬度

回答

相關問題