Колонка таблицы не соблюдает заданные размеры

Question

У меня есть таблица, написанная с помощью React-table, я столкнулся с проблемой, что когда я задаю ширину нескольким колонкам сразу, они не соблюдают четко заданную ширину. К примеру колонка имеет ширину в 50px в коде, при этом по факту у нее ширина 270px.

Вот базовый код таблицы:

<table>
   <thead>
     <tr><th>content</th</tr>
     ...
   </thead>
   <tbody>
      <tr><td>content</td</tr>
      ...
   </tbody>
</table>

table {
  border-spacing: 0;
  border: 1px solid $border;
  border-radius: 5px;
  table-layout: fixed;
  width: 100%;
}

Как мне сохраняя растяжение таблицы на весь экран, и при этом задавая четкие размеры некоторым колонкам - заставить их соблюдать эти размеры?

Так же есть максимально похожий набросок на реальную таблицу тут - https://codesandbox.io/p/sandbox/react-table-lxzyj6

Answer 1

Попробуй свойство table-layout: fixed;.

import React from 'react';

const TableComponent = () => {
  return (
    <table style={{ tableLayout: 'fixed', width: '100%' }}>
      <thead>
        <tr>
          <th style={{ width: '50px' }}>Column 1</th>
          <th style={{ width: '100px' }}>Column 2</th>
          <th>Column 3</th> {/* Этот столбец растянется на оставшееся пространство */}
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        {/* Другие строки */}
      </tbody>
    </table>
  );
};

export default TableComponent;



table {
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
  table-layout: fixed;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

БЛОГ НА HUSL

Колонка таблицы не соблюдает заданные размеры

Ответы (1 шт):