表の幅自動調整#

表をHTMLで作成し、項目の文字列の幅に合わせて自動調整するためには、基本的なHTMLとCSSの知識が必要です。以下は、サンプルのHTMLとCSSのコードです。

HTMLのコード（例としてindex.htmlに保存）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブルのサンプル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>番号</th>
                <th>項目</th>
                <th>説明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>アイテム1</td>
                <td>このアイテムの詳しい説明です。</td>
            </tr>
            <tr>
                <td>2</td>
                <td>アイテム2</td>
                <td>別のアイテムの詳しい説明です。</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSSのコード（例としてstyles.cssに保存）:

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

このCSSは、表の各セルの内容に応じて幅が自動的に調整されます。特定のセルの幅を固定したい場合、そのセルのwidthプロパティを設定することで調整できます。