色々教えて頂いて有り難うございます！
頂いたヒントを元に試行錯誤して、希望通りの表示が出来る様になりました！
やったこと
- レイアウトを【HTML＆計算式】式から【計算式のみ】式へ変更
- 頂いたヒントと元々のコードをフェリスと相談しながら修正
結果
最終的な計算式
LET(
rowsPerPage, 25, // 1ページあたりの行数
// テーブルデータを取得（行番号、単位も含めて抽出）
// allRows, JSON_P(OTVAL(手配内容詳細, TPOUT(部品番号, 部品名称, 数量, 単位, 備考))),
allRows, JSON_P(
OTVAL(手配内容詳細,
TPOUT(部品番号, 部品名称, 数量, 単位, 備考),
TPFILTER(
LEFT(部品名称, 2) <> "送料" &&
LEFT(部品名称, 3) <> "出張費" &&
LEFT(部品名称, 3) <> "作業費"
)
)
),
totalRows, ARRAY_COUNT(allRows),
totalPages, CEIL(totalRows / rowsPerPage),
TAGS_HTML(
ARRAY_FOR(totalPages, pIdx,
LET(
start, pIdx * rowsPerPage,
pageRows, SLICE(allRows, start, start + rowsPerPage),
PAGE_HTML(
// --- ページ番号 ---
TAG("div", ATTR("style", "text-align: right; font-size: 0.9em; color: #666;"),
"ページ: " & (pIdx + 1) & " / " & totalPages
),
// --- ヘッダータイトル ---
TAG("div", ATTR("class", "pcraft-inv-header"), "送付先・出荷条件・手配内容"),
// インフォメーション部分
TAG("div", ATTR("class", "pcraft-inv-info"),
TAG("table", ATTR("class", "custom-table"),
TAG("tr",
TAG("td", "送付先_会社名｜住所情報"),
TAG("td", IF(送付先_会社名住所情報, 送付先_会社名住所情報, "－"))
),
TAG("tr",
TAG("td", "送付先_担当者＆電話FAX"),
TAG("td", IF(送付先_担当者電話FAX, 送付先_担当者電話FAX, "－"))
),
TAG("tr",
TAG("td", "機種＆製造番号"),
TAG("td", IF(機種一覧, 機種一覧, "－") & "｜" & IF(製番一覧, 製番一覧, "－"))
)
)
),
// --- テーブル部 ---
TAG("table", ATTR("class", "pcraft-inv-item-table"),
TAG("thead",
TAG("tr",
TAG("th", "#"), TAG("th", "部品番号"), TAG("th", "部品名称"), TAG("th", "数量")
)
),
TAG("tbody",
ARRAY_MAP(pageRows, row, rIdx,
LET(
// 全体の行番号を計算 (ページ開始位置 + ループ内インデックス + 1)
rowNum, start + rIdx + 1,
TAG("tr",
TAG("td", ATTR("class", "pcraft-inv-item-row"), rowNum),
TAG("td", DIC_ITEM(row,"部品番号")),
TAG("td", DIC_ITEM(row,"部品名称")),
TAG("td", ATTR("class", "value-right"),
FIXED(DIC_ITEM(row,"数量")) & " " & DIC_ITEM(row,"単位")
)
)
)
)
)
),
// --- 備考欄（ページ下部など） ---
// TAG("div", ATTR("style", "margin-top: 10px; border-top: 1px solid #ccc;"),
// "【手配備考】 " & IF(手配備考, 手配備考, "－")
// )
)
)
)
)
)
最終的なCSS
/* -----------------------------------------------------------
1. 全体コンテナとヘッダー
----------------------------------------------------------- */
.rex0220-pcraft-page {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.5;
}
.pcraft-inv-header {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
padding-bottom: 0px;
border-bottom: 2px solid #333;
}
.section-title {
margin: 25px 0 8px 0;
font-weight: bold;
font-size: 1.1em;
border-left: 4px solid #333;
padding-left: 10px;
}
/* -----------------------------------------------------------
2. 情報テーブル（custom-table）
----------------------------------------------------------- */
.pcraft-inv-info {
margin-bottom: 0px !important;
}
.custom-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 5px;
}
.custom-table td {
border: 1px solid #aaa;
padding: 8px;
}
/* 左列（見出し）のスタイル */
.custom-table td:first-child {
background-color: #f2f2f2;
white-space: nowrap;
font-weight: bold;
width: 25%;
}
/* -----------------------------------------------------------
3. 手配内容テーブルの列幅調整
----------------------------------------------------------- */
.pcraft-inv-item-table {
width: 100%;
font-size: 12px;
border-collapse: collapse;
border: 1px solid #000;
table-layout: fixed;
}
/* 各列の幅指定（左から順番に指定） */
/* # (NO) 列 */
.pcraft-inv-item-table th:nth-child(1),
.pcraft-inv-item-table td:nth-child(1) {
width: 40px;
white-space: nowrap;
text-align: center;
}
/* 部品番号 列 */
.pcraft-inv-item-table th:nth-child(2),
.pcraft-inv-item-table td:nth-child(2) {
width: 35%;
text-align: left;
}
/* 部品名称 列（ここを一番広く取る） */
.pcraft-inv-item-table th:nth-child(3),
.pcraft-inv-item-table td:nth-child(3) {
width: 65%;
text-align: left !important;
}
/* 数 列（最小幅に調整） */
.pcraft-inv-item-table th:nth-child(4),
.pcraft-inv-item-table td:nth-child(4) {
width: 60px;
white-space: nowrap;
text-align: right;
}
計算式：HTML組み立て（LETなし）
計算式のポイント
参考知識 (Reference)