CodePen Embed

<p>1列目を見出しにした場合</p>
<table class="test01">
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本テスト2</td>
      <td>見本見本テスト3</td>
  </tr>
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本テスト2</td>
      <td>見本見本テスト3</td>
  </tr>
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本テスト2</td>
      <td>見本見本テスト3</td>
  </tr>
  </table>
  
  <hr>
<br>
<br>

<p>１行目を見出しにした場合</p>
<p>border-collapse: separate;で指定</p>
  <table class="test2">
  <tr>
    <th class="midasi1">見出し1</th>
    <th class="midasi2">見出し2</th>
    <th class="midasi3">見出し3</th>
  </tr>
  <tr>
    <td>トップ</td>
    <td>テキスト1</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>トップ2</td>
    <td>テキスト2</td>
    <td>2000</td>
  </tr>
  <tr>
    <td>トップ3</td>
    <td>テキスト3</td>
    <td>3000</td>
  </tr>
</table>

<br>
<br>
<hr>
<p>table-layout: auto;で指定</p>
<table class="test03">
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
    <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
  </table>
<br>
<br>
<hr>
<p>table-layout: fixed;で指定</p>
<table class="test04">
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
  <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
    <tr>
    <th>見出しのセル</th>
      <td>見本</td>
      <td>見本見本テスト</td>
      <td>見本見本</td>
  </tr>
  </table>
<br>
<br>
<hr>
<p>2列のパターンtable-layout: auto;で指定</p>
<table class="test05">
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
    <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  </table>
<br>
<br>
<hr>
<p>2列のパターンtable-layout: fixed;で指定</p>
<table class="test06">
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
    <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  </table>
<br>
<br>
<hr>
<div class="collapse">
  <div class="inner">
<p>border-collapse: collapse;で指定</p>
<table class="test07">
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
    <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  </table>
  </div>
<br>
<br>
  <div class="inner">
<p>border-collapse: separate;で指定</p>
<table class="test08">
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
    <tr>
    <th>見出</th>
      <td>見本見本テスト</td>
  </tr>
  </table>
    </div>
  </div>
<br>
<br>
<hr>
<div class="span">
  <div class="inner">
<p>やっちゃダメなcolspan・rowspan</p>
<table class="test09">
  <tr>
    <th>見出</th>
      <td colspan="3">見本</td>
  </tr>
  <tr>
    <th>見出</th>
      <td colspan="3">見本</td>
  </tr>
    <tr>
    <th>見出</th>
      <td colspan="3">見本</td>
  </tr>
  </table>
  </div>
<br>
<br>
  <div class="inner">
<p>こんな場合はOK</p>
<table class="test10">
  <tr>
    <th>見出</th>
      <td colspan="3">見本見本テスト</td>
  </tr>
  <tr>
    <th>見出</th>
      <td>見本</td>
      <td>見本</td>
      <td>見本</td>
  </tr>
    <tr>
    <th>見出</th>
      <td>見本</td>
      <td>見本</td>
      <td>見本</td>
  </tr>
  </table>
    </div>
  </div>

.test01 {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.test01 th,
.test01 td {
  padding: 10px;
  border: 1px solid black;
}
.test01 th {
  background-color: #0bd;
}



.test2 {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.test2 th,
.test2 td {
  padding: 10px;
  border: 1px solid black;
}
.test2 th {
  background-color: #0bd;
}

/* table-layout: auto;で指定 */
.test03 {
  width: 800px;
  table-layout: auto;
  border-collapse: separate;
}
.test03 th {
  width: 200px;
}
.test03 th,
.test03 td {
  padding: 10px;
  border: 1px solid black;
}
.test03 th {
  background-color: #0bd;
}

/* table-layout: fixed;で指定 */
.test04 {
  width: 900px;
  table-layout: fixed;
  border-collapse: separate;
}
.test04 th {
  width: 200px;
}
.test04 th,
.test04 td {
  padding: 10px;
  border: 1px solid black;
}
.test04 th {
  background-color: #0bd;
}

/* 2列のパターンtable-layout: auto;で指定 */
.test05 {
  width: 800px;
  table-layout: auto;
  border-collapse: separate;
}
.test05 th {
  width: 200px;
}
.test05 th,
.test05 td {
  padding: 10px;
  border: 1px solid black;
}
.test05 th {
  background-color: #0bd;
}

/* 2列のパターンtable-layout: fixed;で指定 */
.test06 {
  width: 800px;
  table-layout: fixed;
  border-collapse: separate;
}
.test06 th {
  width: 100px;
}
.test06 th,
.test06 td {
  padding: 10px;
  border: 1px solid black;
}
.test06 th {
  background-color: #0bd;
}

/* border-collapseの設定 */
.collapse {
  display: flex;
}
.inner {
  margin: 20px;
}
/* border-collapse: collapse;で指定 */
.test07 {
  width: 400px;
  table-layout: auto;
  border-collapse: collapse;
}
.test07 th {
  width: 100px;
}
.test07 th,
.test07 td {
  padding: 10px;
  border: 1px solid red;
}
.test07 th {
  background-color: #0bd;
}

/* 2列のパターンtable-layout: fixed;で指定 */
.test08 {
  width: 400px;
  table-layout: fixed;
  border-collapse: separate;
}
.test08 th {
  width: 100px;
}
.test08 th,
.test08 td {
  padding: 10px;
  border: 1px solid red;
}
.test08 th {
  background-color: #0bd;
}


/* colspan・rowspan  */
.span {
  display: flex;
}
.inner {
  margin: 20px;
}
/* やっっちゃダメなcolspan・rowspan */
.test09 {
  width: 400px;
  border-collapse: collapse;
}
.test09 th,
.test09 td {
  padding: 10px;
  border: 1px solid red;
}
.test09 th {
  width: 100px;
  background-color: #0bd;
}

/* こんな場合はOK */
.test10 {
  width: 400px;
  border-collapse: collapse;
}
.test10 th,
.test10 td {
  padding: 10px;
  border: 1px solid red;
}
.test10 th {
  width: 100px;
  background-color: #0bd;
}

This Pen is owned by 井上 on CodePen.

See more by @inopro on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.