Brayn Brayn - 2 months ago 7
CSS Question

Maintaining row padding during js table search

I have a table with information and a simple search function to search any value in said table.

With CSS I styled the table and gave each row

padding
, but when I use the search function it seems to ignore the
padding
.

Maybe the following code snippet is useful:

Try to search for a value that's not there like Pink. Is there a way to maintain the padding throughout the search even if no value is found?



var $rows = $('.list #data');
$('#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();
});

table td:nth-child(1) {
padding-right: 60px;
border-left: 1px solid #D3E2E8;
}

table td:nth-child(2) {
padding-right: 40px;
}

table td:nth-child(3) {
padding-right: 40px;
}

table td:nth-child(4) {
padding-right: 50px;
}

table td:nth-child(5) {
padding-right: 10px;
}

th, td {
border-bottom: 1px solid #D3E2E8;
}

tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}

th {
text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>

<input type="text" id="search" placeholder="Search on any value">




Answer

Remove padding everywhere and replace it with some width for your th and td.

var $rows = $('.list #data');
$('#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();
});
table td:nth-child(1) {
    width: 100px;
    border-left: 1px solid #D3E2E8;
}
table th,
td {
    width: 120px;
}
th,
td {
    border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {
    background-color: #E1F1F7
}
tr:hover {
    background-color: #D0E5ED
}
th {
    text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
    <tr>
        <th>Name</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Shirt color</th>
        <th>Favorite food</th>
    </tr>
    <tr id="data">
        <td>Brian</td>
        <td>Johnson</td>
        <td>17</td>
        <td>Blue</td>
        <td>Chicken tenders</td>
    </tr>
    <tr id="data">
        <td>Jessica</td>
        <td>Beloni</td>
        <td>18</td>
        <td>Green</td>
        <td>Pasta Pesto salad</td>
    </tr>
    <tr id="data">
        <td>Jason</td>
        <td>Popi</td>
        <td>19</td>
        <td>Yellow</td>
        <td>Mac and cheese</td>
    </tr>
    <tr id="data">
        <td>Daniel</td>
        <td>Soup</td>
        <td>34</td>
        <td>Grey</td>
        <td>Chicken Supreme pizza</td>
    </tr>
</table>
<input type="text" id="search" placeholder="Search on any value">