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 を使用してテーブルの幅を尊重できることを知っています。しかし、これを使用すると、適切にスケーリングされません。テーブルをレスポンシブにしたい。それが主な問題です。もう 1 つの事実は、最初の 2 つの列を除くすべての解像度で、すべての TD、TH 要素をできるだけタイトにする必要があるということです。最初の列には明示的なピクセル幅が設定されており、2 番目の列は使用可能な残りの幅すべてにサイズ変更する必要があります。

これは大きな解像度では問題なく機能しますが、使用可能な幅が減少すると、2 番目の列のテキストがテーブルの縮小を妨げます。

テーブルを任意のサイズに縮小できるように、オーバーフローを実際にテキストを切り取る方法はありますか?

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

JSFiddle。

.

于 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 に答える