テーブルの幅を指定したい
ページ作るときにテーブルは<div>ではなく<table>, <tr>, <td>で書きたいのですが、列の幅を指定したくなることがありますよね。ありますよね。
テーブルの幅はデフォルトだと自動設定されてしまいますので、中身に応じて複数のテーブルで列がそろわなくなります。
<td> にちまちま widthプロパティを指定してもいいのですが面倒です。
ソースコード
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/style_category_item_list.css" />
<title>電車</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="page_title">電車</h1>
</div>
<div id="category_item_list">
<table border="0">
<tr>
<td>
......
style_category_item_list.css
#category_item_list table {
max-width: 800px;
margin-left: auto;
margin-right: auto;
border-spacing : 4px 10px;
width: 100%
}
#category_item_list table tr td:nth-child(1) {
vertical-align: top;
width:150px;
}
#category_item_list table tr td:nth-child(2) {
vertical-align: top;
padding-left: 20px;
width:auto;
}
スタイルシートでテーブルの列の幅を指定できました。