Question

我在JSFiddle中有以下内容：http://jsfiddle.net/X37V7/

HTML

<caption>Table 1 Example</caption>

<table id="fx">

 <tr>
   <th class="a75">Values</th>
   <td class="a25 rotate overflow he rr">1</td>
   <td class="a25 rotate overflow he rr">1</td>
   <td class="a25 rotate overflow he rr">1</td>
   <td class="a25 rotate overflow he rr">1</td>
 </tr>
 <tr>
   <th class="a75">Initial value</th>
   <td class="a25">One</td>
   <td class="a25">Two</td>
   <td class="a25">Three</td>
   <td class="a25">Four</td>
 </tr>

</table>

<caption>Table 2 Example</caption>

<table id="fx2">

 <tr>
   <th class="a75">Values</th>
   <td class="a25 rotate overflow he rr">Long Text Example</td>
   <td class="a25 rotate overflow he rr">1</td>
   <td class="a25 rotate overflow he rr">1</td>
   <td class="a25 rotate overflow he rr">1</td>
 </tr>
 <tr>
   <th class="a75">Initial value</th>
   <td class="a25">One</td>
   <td class="a25">Two</td>
   <td class="a25">Three</td>
   <td class="a25">Four</td>
 </tr>

CSS

body {
width:750px;
}

table {
display:block;
border-collapse:collapse;
width:100%;
overflow:hidden;
border-style:solid;
border-width:1px;
}

tr,th,td {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:break-word;
border-style:solid;
border-width:1px;
}

th {
width:5%;
}

.over {
overflow:hidden;
}

.a24 {
width:10%;
}

.a75 {
width:60%;
}

.he {
height:130px;
}

.rotate {
-webkit-transform:rotate(270deg);
}

.rr {
height:-1px;
width:130px;
margin-left:-30px;
}

#fx,#fx2 {
table-layout:fixed;
overflow:hidden;
}

有两个表格示例。两者都设置为固定宽度。

第一个表正确显示，因为单元格中的文本小于其尺寸。

第二个表格显示插入较长文本时会发生什么 - 列变得更宽。

有没有办法强制列/单元格保持其设置的大小，无论其内容如何？

Answer 1

如果将 max-width 值设置为要修复的所需单元格，则可以实现此目的。

请注意固定宽度必须为像素，以便单元格知道何时导致溢出。

（但是，如果您的表格具有固定宽度，则这不是问题）。

.a25{max-width:75px;}

还必须应用溢出 / 文本溢出或文本换行来指定文本应执行的操作。这已经存在于您的示例中。（如下）

（注意.a25在您的演示中不正确.a24）

CLICK FOR WORKING DEMO

完整的CSS（根据您的演示）

body{width:750px} 

table{
    display:block;
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
}    
#fx{
    table-layout: fixed;
    overflow: hidden;
}

#fx2{
    table-layout: fixed;
}    
tr, th, td{
    border-width:1px;
    border-style: solid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
th{
    width: 5%;
}    
.over{overflow: hidden;}
.a25{width:10%;max-width:75px;}
.a75{width:60%}
.he{height:130px;}
.rotate{-webkit-transform:rotate(270deg);}
.rr{height:-1px;width:130px;margin-left:-30px;}

CLICK FOR CLEAN DEMO

CSS（CLEAN VERSION）

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr, th, td{
    border:1px solid #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w25{width:10%;max-width:75px;}
.w75{width:60%}
.h130{height:130px;}

此示例目前是溢出的流畅表。

要固定单元格大小，请将 max-width 替换为宽度，或将表格宽度替换为固定值。

Answer 2

问题在于，您已将white-space: nowrap;设置为阻止它绕行，将其更改为white-space: wrap;。希望有所帮助。

请查看小提琴http://jsfiddle.net/X37V7/

Answer 3

使用下面的CSS代码：

CSS： -

 tr, th, td{
   border-width:1px;
   border-style: solid;
   overflow: hidden;
   text-overflow: ellipsis;
    word-wrap: break-word;
   white-space:wrap;
 }


table td.a25{
    max-height:70px;
}

Answer 4

你可以单独用CSS做到这一点：

仅将框类[如下面定义的css类]分配给要固定宽度的列。

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

希望这有帮助！

CSS HTML将表列强制为特定大小

4 个答案:

CLICK FOR WORKING DEMO

CLICK FOR CLEAN DEMO