Question

我设计了一个隐藏单元格的表格。当单元格文本溢出时，它将隐藏，没有省略号。如果我不使用text-overflow: ellipsis;时间单元格填充不起作用，下面描述了黄色标记的问题。

Answer 1

更新

这里有2个选项，伪元素或额外的div。

伪元素（标记无需更改）

更新了codepen：http://codepen.io/anon/pen/grmopw

CSS

.users td {
  white-space: nowrap;
  overflow: hidden;
  position: relative;           /* added prop. */
  background: inherit;          /* added prop. */
}
.users td:after {               /* added rule */
  content: ' ';
  position: absolute;
  top: 0;
  right:0;
  bottom: 0;
  width: 5px;
  background: inherit;
}

.users tr:nth-child(odd) {      /* added rule */
  background: white;
}

额外div

更新了codepen：http://codepen.io/anon/pen/reyYEZ

CSS

.users td {
  white-space: nowrap;
}
.users td div {                /* added rule */
  overflow: hidden;
}

HTML

  <tr>
    <td><div>00011111111111111111111</div></td>
    <td>Johnny Five</td>
    <td>Robotin'</td>
    <td><div>need@input.com</div></td>
    <td>0001</td>
    <td>Johnny Five</td>
    <td>Robotin'</td>
    <td><div>need@input.com</div></td>     
  </tr>
  <tr>
    <td>0002</td>
    <td><div>Super Superlonglastnamesmith</div></td>
    <td>Doin' stuff</td>
    <td><div>doing@stuff.com</div></td>
    <td>0002</td>
    <td><div>Super Superlonglastnamesmith</div></td>
    <td>Doin' stuff</td>
    <td><div>doing@stuff.com</div></td>        
  </tr>

旁注

text-overflow属性实际上有一个字符串选项，但它仍然只有Firefox支持

更新了codepen：http://codepen.io/anon/pen/jqBYMz

CSS

.users td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: '';
}

Src：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

尝试将班级table-layout的{{1}}切换为.user。这应该使填充按预期工作。

Answer 3

填充没有颜色属性，所以我们不能通过填充隐藏它，但我们可以使用边框来执行。

将此代码添加到CSS文件

.users tr:nth-child(odd) td:nth-of-type(4){
  border-right:15px solid #fff;
}
.users tr:nth-child(even) td:nth-of-type(4){
  border-right:15px solid lightblue;
}

enter image description here

表单元格填充在隐藏时不起作用

3 个答案: