Horizontal versus Vertical Smart Search Table

chessGuru64

Today I made a responsive horizontal and vertical smart search table template! https://codepen.io/ScottFSchmidt/pen/WLLdWZ

I decided to make a vertical smart search because many people thought it was more user friendly (what is your opinion?). Everything works, but I would like to invite anyone who has any suggestions to make it better. I am not advanced at CSS in my opinion and will be adding a few other features today possibly. Here is the beginning foundation:

 <table class="table table-striped table-bordered table-hover table-condensed mobilewrapper" cellpadding="3" cellspacing="0" border="0" style="width: 35%; margin: 0 auto 2em auto;" id="smart_table_across">
   <tr>
       <td align="left"><input type="text" class="column_filter" id="col0_filter" placeholder="First Name"></td>
            <td align="left"><input type="text" class="column_filter" id="col1_filter" placeholder="Last Name"></td>

     <td align="left"><input type="text" class="column_filter" id="col2_filter" placeholder="Zip"></td>

     <td align="left"><input type="text" class="column_filter" id="col3_filter" placeholder="Date"></td>
     </tr>

<table class="table table-responsive table-striped table-bordered table-hover table-condensed" cellpadding="3" cellspacing="0" border="0" style="width: 35%; margin: 0 auto 2em auto;" id="smart_table">
        <thead background-color= "darkgreen"> 
            <tr>
                <th>Column</th>
                <th>Search text</th>
            </tr>
        </thead>
        <tbody class="">
            <tr id="filter_col1" class="" data-column="0">
                <td>ID</td>
                <td align="left"><input type="text" class="column_filter" id="col0_filter"></td>
              </tr>
            <tr id="filter_col2"  class="" data-column="1">
                <td>First Name</td>
                <td align="left"><input type="text" class="column_filter" id="col1_filter"></td>
            </tr>
            <tr id="filter_col3" data-column="2">
                <td>Last Name</td>
                <td align="left"><input type="text" class="column_filter" id="col2_filter"></td>
            </tr>
            <tr id="filter_col4" class="hideClass" data-column="3">
                <td>Zip</td>
                <td align="left"><input type="text" class="column_filter" id="col3_filter"></td>
            </tr>
            <tr id="filter_col5" class="hideClass" data-column="4">
                <td>Date</td>
                <td align="left"><input type="text" class="column_filter" id="col4_filter"></td>
            </tr>

        </tbody>
    </table> 
    </div> </center>