强制表和它的细胞有修复宽度

我有一个网页模板的工作，其中有定义的CSS文件中的以下内容： -强制表和它的细胞有修复宽度

div.dataTables_length select { 
width: 50px; 
} 
.dataTables_filter input, .dataTables_length select { 
display: inline-block; 
margin-bottom: 0; 
}

而且表的定义如下： -

<div class="box-content"> 
<table class="table table-striped table-bordered bootstrap-datatable datatable"> 
<thead> 
<tr> 
<th></th> <th></th> 
</tr></thead> 
<tbody> 
<tr>

btu目前我面临的一个问题是模板会自动截断值并只显示其中的一部分。因此，例如，如果有很长的描述值，单元格可能会显示其中的一部分。那么是否有办法修改表格，以便它具有以下内容： -

表格单元格将始终具有相同的宽度，但动态高度。
表格应始终具有相同的宽度，所以在长文本的情况下它不会超出布局。
要显示每个字段的全文，并且该单元格应自动移动到新行。

问候

:::编辑:::

这是表的显示方式柜面表列包含长的测试： -

enter image description here

来源

2013-07-09 John Peter

您确定文本在客户端而不是服务器端被截断吗？如果你查看源代码，那里是全文还是截断？ –

页面源显示截断的文本？ –

然后文本在它碰到浏览器之前被截断。这意味着没有什么可以用HTML，CSS或JavaScript来完成，这对您有所帮助。它必须在服务器端修复。 –

截断问题已经在评论中得到解决。我将解决表格的宽度问题。

如果您想要设置表格列的宽度，您需要为所有列设置相同的宽度或为特定列指定特定的宽度。

.table th, .table td { width: 50px; } /* sets the default value of all columns */ 
.table .name { width: 100px; word-wrap: break-word; } /* overrides the default with specific value for certain column*/ 

<table class="table"> 
    <tr> 
    <td class="name">James T. Kirk</td> 
    <td class="name">Spock</td> 
    </tr> 
</table>

我会回避在列宽上使用百分比（％），尤其是如果文本长度会波动。

编辑 - 我明白你的意思了。你需要提供一个css风格的自动换行：break-word;我更新了上面的代码并作了jsfiddle演示。

来源

2013-07-09 16:58:18 ZombieCode

可以请你检查我的编辑...并提供一个布局问题的屏幕截图。 –

我添加了我的编辑来解决您的情况。 – ZombieCode

强制表和它的细胞有修复宽度

回答

相关问题