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

Question

我设计了一个带有隐藏单元格的table。当单元格文本溢出时，它将被隐藏，没有 ellipsis.If 我不使用 text-overflow: ellipsis; 那个时候单元格填充不起作用，问题在下面用黄色标记的地方描述。

Answer 1

尝试将 class .user 的 table-layout 切换为 auto。这应该使填充按预期工作。

Answer 2

padding没有color属性，不能用padding隐藏，但是可以用border来实现。

将此代码添加到 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

Answer 3

已更新

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

伪元素（无需更改标记）

更新代码笔：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

更新代码笔：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 支持

更新代码笔：http://codepen.io/anon/pen/jqBYMz

CSS

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

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

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

Table cell padding does not work when it is hidden

css

css-tables