Question: In the success part of my ajax each result gets put into columns.

What I am trying to achive is every 4 columns it will create a new row.

Question: On success part of ajax how to make it so every after every 4 columns will create a new row?

```
<script type="text/javascript">
$("#select_category").on('keyup', function(e) {    
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('questions/displaycategories');?>", 
        data: {
            category: $("#select_category").val()
        },
        dataType: "json",  
        success: function(json){
            list = '';

            list += '<div class="row">';

            $.each(json['categories'], function(key, value ) {
                list += '<div class="col-sm-3">';

                list += value['name'];

                list += '</div>';   
            });

            list += '</div>';

            $('.category-box').html(list);
        }
    });
});
</script>

```

Answer: 
Add this in your css class. this will work.

```
table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
      height: calc(100vh - 360px);
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: calc( 100% - 1em )
}
table {
    width:400px;
}

```

updated js fiddle
<https://jsfiddle.net/vinothsm92/pL1wqaj1/12/>
Check with this : 

```
tbody {
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

```

and remove 

```
.scrollbar {
    height: 450px;
    overflow-y: auto; // Remove this line
}

```