DEMO

HTML

		<div class="container">
  <table>
    <thead>
      <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
        <th>タイトル4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
    </tbody>
  </table>
</div>	

		

HTML説明

行の増減方法
「tr~tr（12~17.18~23.24~29.30~35行目）」をコピーして増やす、または削除してください。

列の増減方法
「th~th（5.6.7.8行目）と各td~td（13~16.19~22.25~28.31~34行目）」をコピーして増やす、または削除してください。

CSS

		<style>

.container {
  margin: 0;
  background: linear-gradient(45deg, #49a09d, #5f2c82);
  font-family: sans-serif;
  font-weight: 100;
}

.container {
  position: relative;
  transform: translate(0%, 0%);
}

.container table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.container th,
.container td {
  padding: 15px;
  background-color: rgba(255,255,255,0.2);
  color: #fff;
	text-align: center;
}
.container th {
  text-align: center;
}

.container thead {
  th {
    background-color: #55608f;
  }
}

.container tbody {
  tr {
    &:hover {
      background-color: rgba(255,255,255,0.3);
    }
  }
  td {
    position: relative;
	  cursor: pointer;
    &:hover {
      &:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -9999px;
        bottom: -9999px;
        background-color: rgba(255,255,255,0.2);
        z-index: -1;
      }
    }
  }
}
</style>
		

CSS説明

見出しの色の変更方法
「色コード（35行目）」を任意のものに書き換えてください。

背景のグラデーションの色の変更方法
「色コード（5行目）」を任意のものに書き換えてください。