Question

A    B
A    B
A    X
A    B

我在包含块的内部有一个表格，其设置宽度为400px。当浏览器宽度小于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

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

enter image description here

Answer 3

搞定了

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

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

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

如果有人能找到让text-overflow使用此方法的方法，请告诉我。

感谢大家的建议。

停止单个表格单元格确定表格宽度

3 个答案: