表TD并不时调整

考虑这个小提琴不削减内容：http://jsfiddle.net/BSaWt/1/表TD并不时调整

<style> 
table { 
    width: 100%; 
} 
td, th { /* Should be as tight as possible on all resolutions */ 
    width: 5%; 
} 
.fixedWidth1 { /* Should allways be 90px or smaller */ 
    max-width: 90px; 
} 
.fixedWidth1 img { 
    width: 100%; 
    height: auto; 
} 
.dynWidth { /* Should allways eat up all remaining width, but be cut if screen width is smaller than table width */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 60% 
} 
.dynWidth > a { 
    display: block; 
} 
.dynWidth > span { 
    display: inline; 
} 
</style> 

<table> 
    <tr> 
     <th>col1</th> 
     <th>col2</th> 
     <th>col3</th> 
     <th>col4</th> 
     <th>col5</th> 
     <th>col6</th> 
    </tr> 
    <tr> 
     <td class="fixedWidth1"> 
      <a href="#"><img src="category.png" /></a> 
     </td> 
     <td class="dynWidth"> 
      <a href="#"><span>A.Way.Too.Large.Text.Which.Cannot.Be.Broken.up.This.ruins.my.entire.layout</span></a> 
     <span>This column also contains other elements, but they are not a problem. The problem with this column, is that it does not shrink! I want it to cut off text if the space available to the table shrinks.</span> 
     </td> 
     <td>Should resize</td> 
     <td>Should resize</td> 
     <td>Should resize</td> 
     <td>Should resize</td> 
    </tr> 
</table>

我知道我可以用表格的布局表尊重宽度：固定的。但通过使用它，它不会正确缩放。我想让桌子响应。这是主要问题。另一个事实是所有的TD，TH元素应该尽可能的紧凑，除了第一列之外的所有分辨率。第一列有明确的像素宽度设置，第二列应调整到所有可用的剩余宽度。

这对大分辨率可以正常工作，但当可用宽度减少第二列中的文本时将防止缩小表。

有没有办法让溢出实际上切断文本，以便表可以缩小到任何尺寸？

来源

2013-03-19 Øystein Amundsen

table-layout:fixed是的解决方案，如果您删除width:100%，则不应“不能正确缩放”。

table { 
    /* width:100%; */ 
    table-layout:fixed; 
}

你

td, th { 
    width: 5%; 
}

是压倒你.fixedWidth1表格单元格的最大宽度。

删除，并添加：

.dynWidth { 
    word-break:break-word; 
}

JSFiddle。

。

来源

2013-03-19 09:11:33

谢谢你，但你的小提琴不工作（至少不能在Firefox）。第二列仍然显示它的全部内容，并防止表格向下缩放。 – 2013-03-19 10:20:33

它不工作，因为Firefox把你的“A.Way.Too.Large ...”当作一个单词。因此它不会打破这个词。你可以做的就是添加'word-break：break-all'，但是如果单个单词可能会重现这个问题，你只能这么做。 – 2013-03-19 10:27:57

非常感谢你。这个“全部爆破”在这里做了诀窍。 :-D – 2013-03-19 10:53:59

在这里你去

<html> 
     <head>   
    <style type="text/css"> 
    *{ 
     margin:0px; 
     padding:0px; 
    } 
    table { 
     width: 100%; 
    } 
    .fixed_width { 
     max-width: 90px; 
    } 
    .fixed_width img { 
     width: 100%; 
     height: auto; 
    } 
    .dyn_width a{ 
     word-break:break-word; 
    } 
    </style> 
     </head> 
     <body> 
    <table border ='1'> 
     <tr> 
      <th>col1</th> 
      <th>col2</th> 
      <th>col3</th> 
      <th>col4</th> 
      <th>col5</th> 
      <th>col6</th> 
     </tr> 
     <tr> 
      <td class="fixed_width" ><a href="#"><img src="category.png" /></a></td> 
      <td width="300" class="dyn_width"> 
       <a href="#">A.Way.Too.Large.Text.Which.Cannot.Be.Broken.up.This.ruins.my.entire.layout </a><br/> 
       <span>This column also contains other elements, but they are not a problem. The problem with this column, is that it does not shrink! I want it to cut off text if the space available to the table shrinks.</span> 
      </td> 
      <td>Should resize</td> 
      <td>Should resize</td> 
      <td>Should resize</td> 
      <td>Should resize</td> 
     </tr> 
    </table> 
     </body> 
    </html>

来源

2013-03-19 09:23:54

表TD并不时调整

回答

相关问题