这看起来是一项简单的任务,但结果却很难。
一行两列的表格。表格宽度应为 100%。
第 1 列: 可能包含很长的文本。应仅显示在一行上,溢出的文本应被剪掉。该列的宽度为整个表格的宽度减去第2列的宽度。
第 2 列: 右栏的宽度应使文本完全适合。文本应右对齐。
换句话说:第 2 列的文本定义了两列的宽度。
第 1 列和第 2 列的文本是动态的,因此绝对宽度不起作用。整个表格的宽度应为浏览器窗口的宽度,这必须适用于所有现代浏览器,包括移动浏览器。
我试过使用表格,也试过只使用 div。这两种方法看起来很有希望,但我还没有完全解决它。
这是我尝试过的一些示例代码:(问题:当浏览器变窄时,表格的宽度会超过 100%)。
<table>
<tr>
<td class ="td1">
This is a table. This is a very long text. Does it get clipped?
</td>
<td class ="td2">
SHOW THIS
</td>
</tr>
</table>
一些 CSS:
table {
width: 100%;
}
.td1 {
width: auto;
overflow: hidden;
white-space: nowrap;
}
.td2 {
white-space: nowrap;
overflow: visible;
text-align: right;
}
尝试使用 div
:(问题:第 2 列被丢弃在第 1 列下方)
<div class="div1">
<div class="div2">
This is a very long text in a div tag. Does it get clipped?
</div>
<div class="div3">
SHOW THIS
</div>
</div>
一些 CSS:
.div1 {
display: inline-block;
width: 100%;
}
.div2 {
width: auto;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.div3 {
display: inline-block;
white-space: nowrap;
float: right;
}
这对我来说是个难题。谁能找到好的解决方案?
更新:
这是整个 html 文件,因此任何人都可以更轻松地尝试:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.div1 {
display: inline-block;
width: 100%;
}
.div2 {
width: auto;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.div3 {
display: inline-block;
white-space: nowrap;
float: right;
}
table {
width: 100%;
}
.td1 {
width: auto;
overflow: hidden;
white-space: nowrap;
}
.td2 {
white-space: nowrap;
overflow: visible;
text-align: right;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
This is a very long text. Does it get clipped?
</div>
<div class="div3">
SHOW THIS
</div>
</div>
<br/><br/><br/>
<table>
<tr>
<td class ="td1">
This is a table. This is a very long text. Does it get clipped?
</td>
<td class ="td2">
SHOW THIS
</td>
</tr>
</table>
</body>
</html>
最佳答案
使用 div 布局:
标记:
<div class="div3">
SHOW THIS
</div>
<div class="div2">
This is a very long text. Does it get clipped?
</div>
CSS
.div2 {
overflow: hidden;
white-space: nowrap;
}
.div3
{
float:right;
}
关于css - 控制表格列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19163495/