1

考虑这个小提琴：http: //jsfiddle.net/BSaWt/1/

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

我知道我可以通过使用 table-layout:fixed 来使表格尊重宽度。但是通过使用它，它将无法正确扩展。我希望桌子能够响应。这是主要问题。另一个事实是，除了前两列之外，所有分辨率的所有 TD、TH 元素都应尽可能紧凑。第一列有一个明确的像素宽度集，第二列应该调整到所有可用的剩余宽度。

这适用于大分辨率，但是当可用宽度减小时，第二列中的文本会阻止表格缩小。

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

4

2 回答 2

4

table-layout:fixed 是解决方案，如果您删除width:100%.

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

您的

td, th {
    width: 5%;
}

覆盖.fixedWidth1表格单元格的最大宽度。

删除它并添加：

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

JSF中。

.

于 2013-03-19T09:11:33.233 回答
0

干得好

<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-19T09:23:54.617 回答