Как получить div, содержащийся в ячейках таблицы div, для заполнения?

Question

Я пытаюсь получить div, которые содержатся в div ячейки таблицы (содержится в изолированной программной среде кода ниже), чтобы расширить и заполнить их родительский div, не перекрывая следующую ячейку под ним

https://codesandbox.io/s/immutable-water-k5qb8

Я добавил серую рамку вокруг областей, которые я хочу заполнить ячейки. Я попытался поиграться с css, но, похоже, ничего не работает на 100% правильно

Вот код для div: -

    <div
        tabIndex={-1}
        contentEditable
        id={id}
        title={value}
        style={{
            border: '1px',
            borderStyle: 'solid',
            borderColor: 'grey',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden'
        }}>
        {value}
    </div>

И код для ячейки таблицы, который содержит его: -

            <TableCell
                component="div"
                variant="body"
                key={key}
                padding="none"
                style={{
                    width: `${currentColWidth}px`,
                    display: 'inline-block'
                }}
                className={clsx(classes.tableCell)}
                onClick={handleCellClick}>
                <DataTableField id={key} column={column} value={value} focusedId={focusedId} />
            </TableCell>

И снимок экрана, на котором показан граничный div, не растущий, чтобы заполнить его родителя: -

Кто-нибудь может мне помочь?

Answer 1

Если вы имеете в виду строку заголовка таблицы, просто добавьте   вместо пробела. Например вместо калорий (г) -> Calories (g)