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表中列的固定宽度

回答

相关问题