[CSS]テーブルのレイアウト

<table class="sample">
  <tr>
    <th>項目1</th>
    <td>内容1</td>
  </tr>
  <tr>
    <th>項目2</th>
    <td>内容2</td>
  </tr>
</table>

table.sample {
	width: 60%;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0px 10px;
	font-size: 12px;
}

table.sample th,
table.sample td {
	padding: 10px;
}

table.sample th {
	background: #800000;
	vertical-align: middle;
	text-align: center;
	width: 100px;
	overflow: visible;
	position: relative;
	color: #fff;
	font-weight: normal;
	font-size: 15px;
}

table.sample th:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(192, 192, 192, 0);
	border-left-color: #800000;
	border-width: 10px;
	margin-top: -10px;
}

table.sample td {
	background: #f8f8f8;
	width: 360px;
	padding-left: 20px;
  border: solid 1px #C0C0C0;
  border-collapse: collapse;
}