3 
A    B
A    B
A    X
A    B

幅が 400px に設定された包含ブロック内にテーブルがあります。ブラウザーの幅が 421px 未満の場合、含まれるブロックの幅は 95% に切り替わります。タイプ「A」および「B」のセルには、単純なテキストが含まれています。適用されたリンクを含む単一のセルがありますwhite-space:nowrap。

私はテーブルがその寸法を自己決定する必要があります（そうではありませんtable-layout:fixed-width）が、2番目の列の幅を決定するときにセル「X」を考慮しません。収まらないセル「X」の内容を非表示にしても構いません。

私はあらゆる種類のさまざまな要素に適用しようとしましたが、役に立ちませんでしたwidth:100%。overflow hidden

html

<table>
    <tr>
        <th style="vertical-align:bottom;">
            <figure>
                <div class="minical-mo">month</div>
                <div class="minical-da">date</div>
            </figure>
        </th>
        <td style="vertical-align:bottom;"><h2>summary</h2></td>
    </tr>
    <tr>
        <th class="space">Calendar</th>
        <td class="space"></td>
    </tr>
    <tr>
        <th class="space">Date</th>
        <td class="space">date</td>
    </tr>
    <tr>
        <th>Start Time</th>
        <td>time</td>
    </tr>
    <tr>
        <th>End Time</th>
        <td>time</td>
    </tr>
    <tr>
        <th>Location</th>
        <td>location</td>
    </tr>
    <tr>
        <th class="space">Attachment</th>
        <td class="space link"><a href="link">link</a></td>
    </tr>
    <tr>
        <th class="space">Description</th>
        <td class="space">long desc</td>
    </tr>
</table>

scss

table{  
    width:100%;
    margin:1em 0;
    th{
        color:$c_modal;
        text-align:right;
        font-size:.85em;
        padding: 3px;
        vertical-align:top;
        &.space{
            padding-top:1em;
        }
        figure{
            float:right;
            margin:0;
            .minical-mo{
                width:60px;
                height:15px;
                font-size:11px;
                line-height:15px;
                text-align:center;
                color:white;
                background-color:$c_main;
            }
            .minical-da{
                width:60px;
                height:45px;
                font-size:35px;
                line-height:45px;
                text-align:center;
                color:black;
                background-color:white;
                border-radius:0 0 5px 5px;
                -webkit-box-shadow: 0 5px 12px -5px $c_dk;
                -moz-box-shadow: 0 5px 12px -5px $c_dk;
                box-shadow: 0 5px 12px -5px $c_dk;
            }
        }   
    }
    td{
        color:black;
        font-size:.85em;
        padding:3px;
        vertical-align:top;
        &.space{
            padding-top:1em;
        }
        p{
            margin-bottom:1em;
            line-height:1.2;
        }
        &.link{
            overflow:hidden;
            a{
                                    width:100%;
                overflow:hidden;
            }
        }
    }
}
4

3 に答える 3

1

以下が要素に適用されていることを確認してください.link。

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100px; /* adjust as needed */

これにより、リンクが長すぎる場合はリンクが切断さ...れ、最後に が埋められます。

于 2013-04-19T21:38:30.563 に答える
0

テキスト文字列の実際のサイズを制限し、ツール ヒントにテキスト全体を表示することで、同様の問題を処理しました。ブログ投稿はこちらです。

ここに画像の説明を入力

于 2013-04-19T21:41:43.337 に答える