JSFiddle - React, Tailwind, and code Playground

by revzephyr

HTML

<div>
  <table id="table">
    <thead>
    <tr><th colspan="8" align="left"><input type="text" id="search" placeholder=" 検索..."></th></tr>
      <tr>
        <th>He1</th>
        <th>He2</th>
        <th>He3</th>
        <th>He4</th>
        <th>He5</th>
        <th>He6</th>
        <th>He7</th>
        <th>He8</th>
      </tr>
    </thead>
    <tbody>
      <TR>
        <TD>A1</TD>
        <TD>B1</TD>
        <TD>C1</TD>
        <TD>D1</TD>
        <TD>E1</TD>
        <TD>F1</TD>
        <TD>G1</TD>
        <TD>H1</TD>
      </TR>
      <TR>
        <TD>A2</TD>
        <TD>B2</TD>
        <TD>C2</TD>
        <TD>D2</TD>
        <TD>E2</TD>
        <TD>F2</TD>
        <TD>G2</TD>
        <TD>H2</TD>
      </TR>
      <TR>
        <TD>A3</TD>
        <TD>B3</TD>
        <TD>C3</TD>
        <TD>D3</TD>
        <TD>E3</TD>
        <TD>F3</TD>
        <TD>G3</TD>
        <TD>H3</TD>
      </TR>
      <TR>
        <TD>A4</TD>
        <TD>B4</TD>
        <TD>C4</TD>
        <TD>D4</TD>
        <TD>E4</TD>
        <TD>F4</TD>
        <TD>G4</TD>
        <TD>H4</TD>
      </TR>
      <TR>
        <TD>A5</TD>
        <TD>B5</TD>
        <TD>C5</TD>
        <TD>D5</TD>
        <TD>E5</TD>
        <TD>F5</TD>
        <TD>G5</TD>
        <TD>H5</TD>
      </TR>
      <TR>
        <TD>A6</TD>
        <TD>B6</TD>
        <TD>C6</TD>
        <TD>D6</TD>
        <TD>E6</TD>
        <TD>F6</TD>
        <TD>G6</TD>
        <TD>H6</TD>
      </TR>
      <TR>
        <TD>A7</TD>
        <TD>B7</TD>
        <TD>C7</TD>
        <TD>D7</TD>
        <TD>E7</TD>
        <TD>F7</TD>
        <TD>G7</TD>
        <TD>H7</TD>
      </TR>
      <TR>
        <TD>A8</TD>
        <TD>B8</TD>
        <TD>C8</TD>
        <TD>D8</TD>
        <TD>E8</TD>
        <TD>F8</TD>
        <TD>G8</TD>
        <TD>H8</TD>
      </TR>
    </tbody>
  </table>
</div>

CSS

body {
  padding: 20px;
}

input[type=text] {
  width: 20%;
  height: 24px;
  margin: 5px;
  transition: width 0.35s ease-in-out;
  border: 2px solid #CCC;
}

input[type=text]:focus {
  width: 90%;
}

div {
  width: 350px;
  height:180px;
  overflow-x: scroll;
}

table#table {
  table-layout: fixed;
  width: 350px;
  border-collapse: collapse;
}

tbody tr:hover {
  background-color: #f5f5f5;
}

tr:nth-child(2) th, td {
  padding: 2px;
  width: 50px;
  border-bottom: 1px solid #C4C4C4;
}

td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: grey;
}

thead tr:nth-child(2) th {
  position: sticky;
  top: 42px;
  z-index: 2;
  background-color: grey;
}

thead tr:first-child th {
  position: sticky;
  top:0;
  z-index: 2;
  background-color: #FFF;
}

JavaScript

var $rows = $('#table tbody tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});