Closed4
HTMLのテーブルの転置
さわら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルの転置</title>
<style>
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
table {
width: 1000px;
}
tr {
display: block;
float: left;
}
th,
td {
display: block;
}
thead {
display: block;
}
tbody {
display: block;
}
</style>
</head>
<body>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<th>行1</th>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<th>行2</th>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<th>行3</th>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
</tbody>
</table>
</body>
</html>
グリッドレイアウト（要改善）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルの転置</title>
<style>
table {
display: grid;
border-collapse: collapse;
/* 転置後の列数を元の行数+1（ヘッダー用）に設定 */
grid-template-columns: repeat(4, 1fr);
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
/* ヘッダーセルの配置 */
/* 最初の空セル */
thead tr th:nth-child(1) {
grid-row: 1;
grid-column: 1;
}
/* 元の列ヘッダーを転置後の行ヘッダーに */
thead tr th:nth-child(2) {
grid-row: 2;
grid-column: 1;
}
thead tr th:nth-child(3) {
grid-row: 3;
grid-column: 1;
}
thead tr th:nth-child(4) {
grid-row: 4;
grid-column: 1;
}
/* 元の行ヘッダーを転置後の列ヘッダーに */
tbody tr:nth-child(1) th {
grid-row: 1;
grid-column: 2;
}
tbody tr:nth-child(2) th {
grid-row: 1;
grid-column: 3;
}
tbody tr:nth-child(3) th {
grid-row: 1;
grid-column: 4;
}
/* データセルの配置 */
/* tbody tr:nth-child(1) */
tbody tr:nth-child(1) td:nth-child(2) {
grid-row: 2;
grid-column: 2;
}
tbody tr:nth-child(1) td:nth-child(3) {
grid-row: 2;
grid-column: 3;
}
tbody tr:nth-child(1) td:nth-child(4) {
grid-row: 2;
grid-column: 4;
}
/* tbody tr:nth-child(2) */
tbody tr:nth-child(2) td:nth-child(2) {
grid-row: 3;
grid-column: 2;
}
tbody tr:nth-child(2) td:nth-child(3) {
grid-row: 3;
grid-column: 3;
}
tbody tr:nth-child(2) td:nth-child(4) {
grid-row: 3;
grid-column: 4;
}
/* tbody tr:nth-child(3) */
tbody tr:nth-child(3) td:nth-child(2) {
grid-row: 4;
grid-column: 2;
}
tbody tr:nth-child(3) td:nth-child(3) {
grid-row: 4;
grid-column: 3;
}
tbody tr:nth-child(3) td:nth-child(4) {
grid-row: 4;
grid-column: 4;
}
</style>
</head>
<body>
<h2>転置されたテーブル</h2>
<table>
<thead>
<tr>
<th></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<th>行1</th>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<th>行2</th>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<th>行3</th>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
</tbody>
</table>
</body>
</html>
こちらが素晴らしい。
さわらtunstackで作る場合
import React, { useMemo } from 'react';
import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
import './App.css'; // CSSを適用するためのimport
interface TableData {
Num: string;
Alpha: string;
Beta: string;
}
const App: React.FC = () => {
const data: TableData[] = useMemo(() => [
{ Num: '1.1.1.1.1', Alpha: 'Apple', Beta: 'Hello' },
{ Num: '2.2.2', Alpha: 'Banana', Beta: 'Hello' },
{ Num: '3.3.3.3.3.3.3', Alpha: 'Cherry', Beta: 'Hello' },
{ Num: '4.4', Alpha: 'Dates', Beta: 'Hello' },
{ Num: '4.4', Alpha: 'Dates', Beta: 'Hello' },
{ Num: '4.4', Alpha: 'Dates', Beta: 'Hello' },
{ Num: '4.4', Alpha: 'Dates', Beta: 'Hello' },
], []);
const columns = useMemo(
() => [
{
header: 'Num',
accessorKey: 'Num',
},
{
header: 'Alpha',
accessorKey: 'Alpha',
},
{
header: 'Beta',
accessorKey: 'Beta',
},
],
[]
);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel()
});
return (
<div id="site">
<main id="content">
<table className="vertical">
<caption>Flipped Table (Grid+Flex)</caption>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder ? null : (
<div>
{header.column.columnDef.header}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>{cell.getValue()}</td>
))}
</tr>
))}
</tbody>
</table>
</main>
</div>
);
};
export default App;
@supports (display: grid) {
.vertical {
display: grid;
grid-template-columns: min-content min-content;
grid-template-rows: auto auto;
grid-template-areas:
"caption caption"
"head body";
}
.vertical thead {
grid-area: head;
}
.vertical tbody {
grid-area: body;
}
.vertical caption {
grid-area: caption;
}
}
/* Flex - Cross Browser CSS */
.vertical thead {
display: flex;
flex-shrink: 0;
min-width: min-content;
}
.vertical tbody {
display: flex;
}
.vertical tr {
display: flex;
flex-direction: column;
min-width: min-content;
flex-shrink: 0;
}
.vertical td, .vertical th {
display: block;
}
/* Visual styling */
table { border-collapse: collapse; }
table td {
border: 1px solid black;
}
table th {
border: 1px solid black;
background-color: grey;
color: white;
}
このスクラップは4ヶ月前にクローズされました