我有一個包含三列的表。在其中一個列中（在照片中它在中間），我想在下面添加一個小描述（例如，設備的作業系統）。我嘗試了 Grid 的幾個選項，但對我沒有任何幫助。也許你能幫助我？
為了更好的主意，我在照片中用綠色標記了所需的結果
return (
<TableRow sx={TableRowStyle}>
<TableCell size='medium' align='left' sx={TableCellIdStyle}>
{
(props.id === '-')
? ""
: <DeleteHidePacketButtonGroup packetReference={null} isHidden={null} />
}
</TableCell>
<TableCell size='medium' align='left' sx={TableCellIdStyle}>{props.id}</TableCell> /*This TableCell is responsible for the central column */
<TableCell size='medium' align='right' sx={TableCellIdStyle}>
{
nextPage !== undefined ? <a className="page-links" onClick={showList}>List of {nextPage}</a> : null
}
</TableCell>
</TableRow>
);
uj5u.com熱心網友回復：
我不知道您使用的是什么 UI 框架，但一般來說，aTableCell不應該TableCell直接在另一個內部。div對于您的問題，您可以在中心表格單元格內創建一個。將其設定為display: flex; flex-direction: column。并將您的內容放入該 div 中。
uj5u.com熱心網友回復：
您可以嘗試titleHTML 元素中的屬性，基本上，title 屬性為您提供了瀏覽器端的默認描述框
<tr>
<td title="This is discription" onClick={...} styles={{...}}>
{...}
</td>
</tr>
在你的情況下，你甚至可以通過定位元素來嘗試這個
cell.setAttribute('title', "This is discription");
是的，你不能在<Tablecell/>里面添加另一個<Tablecell/>
uj5u.com熱心網友回復：
這是一個希望對您有所幫助的快速片段（基于 MUI 的一些示例代碼）。第 2 列包含您可能需要的內容：
const addTextInCell = () => (
<div>
<div>Device 1</div>
<div>Android</div>
</div>
);
const rows = [
{ id: 1, col1: "Hello", col2: "World", col3: "Column 1" },
{ id: 2, col1: "MUI X", col2: "is awesome", col3: "Column 2" },
{ id: 3, col1: "Material UI", col2: "is amazing", col3: "Column 3" }
];
const columns = [
{ field: "id", hide: true },
{ field: "col1", headerName: "Column 1", width: 150 },
{
field: "col2",
headerName: "Column 2",
width: 150,
renderCell: () => addTextInCell()
},
{ field: "col3", headerName: "Column 3", width: 150 }
];
const TestTable = () => (
<div style={{ height: 300, width: "100%" }}>
<DataGrid rows={rows} columns={columns} />
</div>
);
export default TestTable;
我正在使用 renderCell 方法，您可以在其中指定單元格將呈現的內容。在“addTextInCell”函式中，您可以擁有 HTML，在這種情況下，它只是一個簡單<div>的包含兩個以上的 HTML，<div>它將為您提供所需的結果（您可以將其替換為您想要的任何內容）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/495645.html
標籤：javascript 反应 材料-ui