【html/CSS】tableの行ごとマスごとに幅を変える方法

tableは表を作ることができるhtmlタグです。これを使うことで行ごと、マスごとの幅をそろえることができます。

「でもあえて行ごとマスごとの幅を変えたい！」

tableの行ごとマスごとに幅を変える方法を解説します。

【行幅を変える】trにdisplay: table

trはtableの行を表すhtmlタグです。

trに「display: table」を指定すると「行」ではなく「表の枠」に変わります。

これにより行同士、マス同士の横幅を揃えるという機能がなくなり、行ごとマスごとに幅を変えることができます。

ふだんはtrにCSSはほぼ効きませんが、「display: table」を指定することでtableに効くCSSが効くようになります。よってwidthが効くようになり、幅を指定できます。

セルセルセル1	セル2	セルセル3
セル4	セルセル5	セルセルセルセルセル6
セルセル7	セルセルセルセル8	セル9

<style>
.example{
    border: none;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.example tr{
    /*コレ*/display: table;
    margin-bottom: -1px;
}
.example td{
    border: 1px solid #333;
}
</style>
<table class="example" border>
    <tr>
        <td>セルセルセル1</td><td>セル2</td><td>セルセル3</td>
    </tr>
    <tr style="width: 70%">
        <td>セル4</td><td>セルセル5</td><td>セルセルセルセルセル6</td>
    </tr>
    <tr>
        <td>セルセル7</td><td>セルセルセルセル8</td><td>セル9</td>
    </tr>
</table>

【htmlだけ】マスを結合する

htmlだけでマスごとの幅を変えるにはマスの結合を使いましょう。

結合をhtmlだけで作るのは難しいため、いったんエクセルなどでイメージを作ってからExcelからHTMLへの変換できるサービスを使ってhtmlにしましょう。

セル1		セル2	セル3			セル4
セル5	セル6		セル7	セル8
セル9	セル10	セル11			セル12	セル13
セル14				セル15	セル16

<table border>
	<tr>
		<td colspan="2">セル1</td>
		<td>セル2</td>
		<td colspan="3">セル3</td>
		<td>セル4</td>
	</tr>
	<tr>
		<td>セル5</td>
		<td colspan="2">セル6</td>
		<td>セル7</td>
		<td colspan="3">セル8</td>
	</tr>
	<tr>
		<td>セル9</td>
		<td>セル10</td>
		<td colspan="3">セル11</td>
		<td>セル12</td>
		<td>セル13</td>
	</tr>
	<tr>
		<td colspan="4">セル14</td>
		<td>セル15</td>
		<td colspan="2">セル16</td>
	</tr>
</table>

【まとめ】tableの行ごとマスごとに幅を変える方法

行幅を変えるにはtrにdisplay: tableを指定する

htmlだけでマスごとの幅を変えるにはマスを結合する

以上、tableの行ごとマスごとに幅を変える方法でした。