Ширина столбца таблицы

Question

У меня есть большая таблица HTML (например, 50 столбцов), и у каждого столбца есть 4 возможных настраиваемых стиля:

• auto (например, flex 1) -> 'auto'
• px(число в пикселях) -> '100px'
• % (процентное число) -> '10% '
• content (ширина максимального содержимого этого столбца) ->' content '

<table *ngIf="features.length > 0" id="list-tab-table" #listTabTable>
    <colgroup>
        <col *ngFor="let attribute of features[0].getAttributesListView(); let i = index" [ngClass]="{
                'cls-auto': attribute.listviewwidth === 'auto',
                'cls-content': attribute.listviewwidth === 'content',
                'cls-px': attribute.listviewwidth.indexOf('px') > 0,
                'cls-percent': attribute.listviewwidth.indexOf('%') > 0
            }">
    </colgroup>
    <thead>
        <tr class="label-row">
            <th *ngFor="let attribute of features[0].getAttributesListView()">
                <p>{{attribute.label}}</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let feature of features; let i = index">
            <td *ngFor="let attribute of feature.getAttributesListView()" title="{{attribute.value}}">
                <p [innerHTML]="attribute.value"></p>
            </td>
        </tr>
    </tbody>
</table>

Я перепробовал все, что знаю: элементы col, макет таблицы, flex-элементы ... но, кажется, ничто не покрывает все параметры.

Все параметры могут происходить одновременно вразные столбцы: column1-auto, column2-200px, column3-content, column4-10%, column5-100px, column6-20% ...

Stackblitz: https://stackblitz.com/edit/table-widths

Answer 1

Я не совсем понимаю, что описывают ваши различные описания, но многое можно достичь, если набрать определенные свойства тега table и установить ширину и т. Д. Для элементов col.

Если предположить, что число col элементов известно, то можно получить процентную ширину.

Несколько примеров:

Я думаю, что это ваш "автоматический" вариант

table {
  border: 1px solid grey;
  background: greenyellow;
  width: 100%;
}

col:nth-of-type(2n) {
  background: pink;
}

col {}

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>columns</th>
      <th>second column</th>
      <th>third column</th>
      <th>fourth column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td>
      <td>more content</td>
      <td>random comment</td>
      <td>more stuff</td>
    </tr>
  </tbody>
</table>

Параметр фиксированной ширины пикселя

table {
  border: 1px solid grey;
  background: greenyellow;
}

col:nth-of-type(2n) {
  background: pink;
}

col {
  width: 100px;
}

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>columns</th>
      <th>second column</th>
      <th>third column</th>
      <th>fourth column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td>
      <td>more content</td>
      <td>random comment</td>
      <td>more stuff</td>
    </tr>
  </tbody>
</table>

Опция%:

table {
  border:1px solid grey;
  background: greenyellow;
  width:100%;
  table-layout: fixed
}


col:nth-of-type(2n) {
background: pink;
}

col:nth-child(2) {
  width:50%;
}

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>columns</th>
      <th>second column</th>
      <th>third column</th>
      <th>fourth column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td>
      <td>more content</td>
      <td>random comment</td>
      <td>more stuff</td>
    </tr>
  </tbody>
</table>

Содержание определяет параметр:

table {
  border: 1px solid grey;
  background: greenyellow;
}

col:nth-of-type(2n) {
  background: pink;
}

col {}

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>columns</th>
      <th>second column</th>
      <th>third column</th>
      <th>fourth column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit, amet consectetur </td>
      <td>more content</td>
      <td>random comment</td>
      <td>more stuff</td>
    </tr>
  </tbody>
</table>

Answer 2

Вы можете попробовать ниже CSS.Это добавит горизонтальную полосу прокрутки к таблице.

#list-tab-table {
    overflow-x: auto;        
}