diff --git a/frontend/src/components/StuffHistoryDialog.tsx b/frontend/src/components/StuffHistoryDialog.tsx index d36d15e..4ccd34e 100644 --- a/frontend/src/components/StuffHistoryDialog.tsx +++ b/frontend/src/components/StuffHistoryDialog.tsx @@ -14,7 +14,8 @@ import { TableHead, // 追加 TableRow, // 追加 Paper, - Typography, // 追加: TableContainerの背景用 + Typography, + styled, // 追加: TableContainerの背景用 } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; // 追加: 閉じるアイコンをインポート import { StockHistory } from '../types/types'; @@ -31,6 +32,14 @@ const StuffHistoryDialog = ({ stockHistories: StockHistory[], }) => { + const StyledTableCell = styled(TableCell)({ + paddingTop: '8px', + paddingBottom: '8px', + paddingLeft: '8px', + paddingRight: '8px', + whiteSpace: 'nowrap', + }) + return ( setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '90vw', maxHeight: '80vh' } }}> @@ -62,15 +71,15 @@ const StuffHistoryDialog = ({ overflowX: 'auto', }} > - - +
+ {/* 各ヘッダーセルに white-space: nowrap; を適用 */} - 購入日 + 購入日 {/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */} - 購入店舗 - 購入数量 - 購入価格 + 購入店舗 + 購入数量 + 購入価格 @@ -80,13 +89,13 @@ const StuffHistoryDialog = ({ sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > {/* 各ボディセルに white-space: nowrap; を適用 */} - + {history.buyDate} - + {/* 「購入店舗」セルに nowrap と minWidth を適用 */} - {history.shop || ''} - {history.buyAmount} - {history.price} + {history.shop || ''} + {history.buyAmount} + {history.price} ))}