防止长单元格内容物拉伸细胞

Question

我有一张表，试图将第一列的宽度设置为20％，并将其单元格的内容用省略号包裹。我的目标是无论屏幕大小和单元格内容的长度如何，都保持20％的宽度固定。但是，当电池的含量较长时，电池的拉伸强度会超过20％。我确实尝试过table-layout: fixed，但是由于某种原因，它导致浏览器完全忽略了我的列宽指令。我正在使用Chrome，这是一个jsfiddle：

http://jsfiddle.net/07sktof2/7/

谢谢。

Answer 1

您需要设置td最大宽度：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
})

table {
    font-size: 14px;
    width: 100%;
    border: 1px solid;
    border-collapse: collapse;
}

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid black;
}


.first {
  width: 20%;
  padding-right: 20px;
}

.first .ellipsis {
  width: 90%;
  display:inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: nowrap;
}

Try it Online!