css - 阻止单个表格单元格确定表格宽度

Question

A    B
A    B
A    X
A    B

我在一个包含 block 中有一个表格，该 block 的宽度设置为 400 像素。当浏览器宽度小于 421px 时，包含 block 宽度切换到 95%。 “A”和“B”类型的单元格包含简单文本。有一个单元格包含应用了 white-space:nowrap 的链接。

我需要表格自行确定其尺寸(因此没有 table-layout:fixed-width)，但在确定第二列的宽度时不考虑单元格“X”。隐藏不适合的单元格“X”的内容是可以的。

我已经尝试在各种不同的元素上应用 width:100% 并隐藏 overflow，但无济于事。

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>

跨界

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

Answer 1

确保将以下内容应用于 .link 元素。

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

链接太长会截断，最后补上...