CSS HTML 强制表格列到特定大小

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

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

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

Answer 2

使用下面的 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 3

如果您将 ma​​x-width 值设置为您想要修复的所需单元格，您将能够实现此目的。

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

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

.a25{max-width:75px;}

还必须应用 overflow / text-overflow 或 text-wrap 来指定文本应该做什么。这已经出现在您的示例中。 （如下）

（注意 .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（干净版）

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;}

这个例子目前是一个有溢出的流体表。

要固定单元格大小，请将 ma​​x-width 替换为 width 或将 table width 替换为 fixed 值。

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 */
}

希望这有帮助！