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

Question

A    B
A    B
A    X
A    B

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

我需要表格自行确定其尺寸（所以没有table-layout:fixed-width），但在确定第二列的宽度时不考虑单元格“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;
            }
        }
    }
}

Answer 1

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

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

如果链接太长，这将切断链接，并...在最后填写。

Answer 2

知道了

td.link{
    overflow:hidden;
}
td.link a{
    display:block;
    overflow:visible;
    max-width:10px;
    white-space:nowrap;             
}

在锚上放置一个最大宽度，以防止它确定其列的列大小，然后允许其溢出可见。然后在表格单元格上隐藏溢出。

这个解决方案唯一的坏处是它text-overflow:ellipsis不起作用，因为我们隐藏了块溢出而不是文本溢出。在这种情况下，我很乐意做出牺牲。

如果有人能想办法解决text-overflow这个问题，请告诉我。

感谢大家的建议。

Answer 3

我通过限制文本字符串的实际大小然后将全文放在工具提示中来处理类似的问题。博客文章在这里。