logo标签列表

阻止单个表格单元格决定表格宽度

css
3
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;
            }
        }
    }
}
你尝试过使用CSS的max-width属性吗？ - VoidKing
我已经尝试过使用 max-width，但它也无法正常工作。 - Steven L Smith
3个回答
1

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

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

如果链接太长，这将截断链接，并在末尾用...填充。
我正在尝试避免在.link元素上设置静态宽度。如果可能的话，我希望它占用所有可用空间。可用空间取决于浏览器宽度以及其他单元格内容的某种程度上的影响。 - Steven L Smith
嗯...好吧，如果你不限制宽度的话，这个可能会起作用，这取决于你如何定义表格的大小。 - Niet the Dark Absol
请注意，您可以使用 table-layout:fixed 和百分比大小。 - Niet the Dark Absol
我也试图不使用百分比值，因为我希望第一列的宽度恰好如其所需，第二列填充剩余空间。然而，table-layout：fixed 会阻止这种布局。 - Steven L Smith
0

明白了

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

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

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

如果有人能想出一种方法让 text-overflow 在此工作，请告诉我。

感谢大家的建议。

0

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

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接