html表中列的固定寬度

-1

我想用一個表格來定義固定寬度的列。每個列的寬度是預定義的，並通過以下方式應用於表頭中的'th'元素： ng-style ='{「width」：get_width [i] +「px」}'，其中get_width函數返回一個數字。html表中列的固定寬度

只要文本不超過指定的列寬度，這就可以工作。如果是這樣，寬度會更改以適應整個文本。

問題，我如何使用CSS強制列寬達到我的規格？文本可能會被截斷，如果更長。

Thx提前。

來源

2014-07-16 AJU

嗯，固定的寬度應該限制它們中的任何文本 - http://jsfiddle.net/8QkmD/。請通過發佈代碼演示問題，最好是JSFiddle。 – Utkanos

@Utkanos，我試着用Bootstrap和簡單的CSS這樣的框架，沒有運氣。將盡快發佈一些編輯的代碼。 – AJU

如果可以，請通過設計<table>元素來設置表格的整體寬度。很明顯，CSS的很多實現都會擴展列以適應文本，直到它們碰到表的最大寬度爲止。

Source

來源

2014-07-16 21:26:46

我打算把大量的數據轉儲到這個有很多列的表（超過25個），所以計劃利用最大寬度並不是一個可行的方法。我期望重要的列將以固定寬度向前顯示，我將手動優化爲初始設置的一部分。我的用戶可能會在運行時進一步更改列寬。 – AJU

想想Excel列，那是我想要模仿的行爲。 – AJU

您可以使用CSS截斷文本：FIDDLE

CSS

.div1 { 
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    border:1px solid #000000; 
}

HTML

<p>This div uses "text-overflow:ellipsis":</p> 
<table> 
    <tr> 
     <td><div class="div1">This is some long text that will not fit in the box.</div></td> 
    </tr> 
</table>

來源

2014-07-16 21:26:48 ShemSeger

檢查了這一點。找到這個作品的文本框，但不是在表格中。見代碼 – AJU

<！DOCTYPE HTML>

這個div使用「文本溢出：省略號」：

一些長文本

這是將不適合在框

– AJU

你說得對，我編輯編輯我的答案，包括TD內的一個div。 – ShemSeger

你需要設置表格佈局固定，並設置溢出隱藏細胞你必須使用

<table class="fixed-table"> 
    <col width="20px" /> 
    <col width="30px" /> 
    <col width="40px" /> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
</table> 

.fixed-table{ table-layout:fixed; word-break: break-all;} 
.fixed-tabletd { overflow: hidden; }

來源

2014-07-17 06:09:42

html表中列的固定寬度

回答

相關問題