Make Table Responsive with Collapse and Expand using jQuery in Bootstrap

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<style type="text/css">
    .divtable .tr
    {
        overflow: hidden;
        clear: both; /*border: 1px solid #ccc;*/
        height: 100%;
        width: 100%;
    }
        
    .divtable .th, .divtable .td
    {
        padding: 5px 10px;
        float: left;
        border: 1px solid #ccc;
    }
        
    .divtable .th
    {
        font-weight: bold;
    }
        
    .Col01
    {
        width: 15%;
    }
        
    .Col02
    {
        width: 20%;
    }
        
    .Col03
    {
        width: 30%;
    }
        
    @media (max-width: 767px)
    {
        .accordion-xs .headings
        {
            display: none;
        }
        
        .accordion-xs .tr
        {
            border-bottom-color: #fff;
        }
        
        .accordion-xs .th, .accordion-xs .td
        {
            float: none;
            width: auto;
            padding: 0; /*border: 1px solid #ff0000;*/
        }
        
        .accordion-xs .accordion-xs-toggle
        {
            background-color: orange;
            color: #fff;
            padding: 10px;
            cursor: pointer;
        }
        
        .accordion-xs .accordion-xs-toggle:hover
        {
            background-color: #e69500;
        }
        
        .accordion-xs .accordion-xs-toggle:after
        {
            content: '\2b';
            float: right;
        }
        
        .accordion-xs .accordion-xs-toggle.collapsed:after
        {
            content: '\2212';
        }
        .accordion-xs-collapse .inner
        {
            padding: 10px;
        }
        .accordion-xs-collapse .td:before
        {
            font-weight: bold;
        }
        .accordion-xs-collapse .Col02:before
        {
            content: 'Allocated Village: ';
        }
        .accordion-xs-collapse .Col03:before
        {
            content: 'No of Leaflets in \A Allocated Village: ';
            white-space: pre; /* or pre-wrap */
        }
        .accordion-xs .accordion-xs-toggle:after
        {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
        }
    }
</style>
<script type="text/javascript">
    $(function () {
        var isXS = false,
$accordionXSCollapse = $('.accordion-xs-collapse');

        // Window resize event (debounced)
        var timer;
        $(window).resize(function () {
            if (timer) { clearTimeout(timer); }
            timer = setTimeout(function () {
                isXS = Modernizr.mq('only screen and (max-width: 767px)');

                // Add/remove collapse class as needed
                if (isXS) {
                    $accordionXSCollapse.addClass('collapse');
                } else {
                    $accordionXSCollapse.removeClass('collapse');
                }
            }, 100);
        }).trigger('resize'); //trigger window resize on pageload   

        // Initialise the Bootstrap Collapse
        $accordionXSCollapse.each(function () {
            $(this).collapse({ toggle: false });
        });

        // Accordion toggle click event (live)
        $(document).on('click', '.accordion-xs-toggle', function (e) {
            e.preventDefault();

            var $thisToggle = $(this),
    $targetRow = $thisToggle.parent('.tr'),
    $targetCollapse = $targetRow.find('.accordion-xs-collapse');

            if (isXS && $targetCollapse.length) {
                var $siblingRow = $targetRow.siblings('.tr'),
        $siblingToggle = $siblingRow.find('.accordion-xs-toggle'),
        $siblingCollapse = $siblingRow.find('.accordion-xs-collapse');

                $targetCollapse.collapse('toggle'); //toggle this collapse
                $siblingCollapse.collapse('hide'); //close siblings

                $thisToggle.toggleClass('collapsed'); //class used for icon marker
                $siblingToggle.removeClass('collapsed'); //remove sibling marker class
            }
        });
    });
</script>
<div>
    <div class="container">
        <div class="divtable accordion-xs">
            <div class="tr headings">
                <div class="th Col01">
                    Town/City</div>
                <div class="th Col02">
                    Allocated Village</div>
                <div class="th Col03">
                    No of Leaflets in Allocated Village</div>
            </div>
            <div class="tr">
                <div class="td Col01 accordion-xs-toggle">
                    Carshalton</div>
                <div class="accordion-xs-collapse">
                    <div class="inner">
                        <div class="td Col02">
                            <asp:TextBox ID="TextBox1" Width="95%" runat="server" Enabled="True" />
                        </div>
                        <div class="td Col03">
                            <asp:TextBox ID="TextBox4" Width="95%" runat="server" Enabled="True" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="tr">
                <div class="td Col01 accordion-xs-toggle">
                    Cheam</div>
                <div class="accordion-xs-collapse">
                    <div class="inner">
                        <div class="td Col02">
                            <asp:TextBox ID="TextBox2" Width="95%" runat="server" Enabled="True" />
                        </div>
                        <div class="td Col03">
                            <asp:TextBox ID="TextBox5" Width="95%" runat="server" Enabled="True" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="tr">
                <div class="td Col01 accordion-xs-toggle">
                    Morden Park</div>
                <div class="accordion-xs-collapse">
                    <div class="inner">
                        <div class="td Col02">
                            <asp:TextBox ID="TextBox3" Width="95%" runat="server" Enabled="True" />
                        </div>
                        <div class="td Col03">
                            <asp:TextBox ID="TextBox6" Width="95%" runat="server" Enabled="True" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>