Question

考虑这个小提琴：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元素应尽可能紧密。第一列设置了显式像素宽度，第二列应调整为所有可用剩余宽度。

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

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

Answer 1

table-layout:fixed 解决方案，并且不应该正确扩展＆＃34;如果您删除了width:100%。

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

您

td, th {
    width: 5%;
}

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

删除它并添加：

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

JSFiddle

Answer 2

你去吧

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

调整大小时表TD不会切割内容

2 个答案: