locked
How to have fixed table shape when searching RRS feed

  • Question

  • User-846837922 posted

    I have a palceholder where i can search for the files in the Google Drive. The search works well but when i search for a certain file, the shape of the table becomes smaller and it looks not so nice. An example of what I meant is like this. 

    https://ibb.co/hXqyjkR

    That is the table before i start searching. After i start searching, it looks like this: 

    https://ibb.co/1fG59fB

    I want the table headers to be fixed like the first link and whenever i search for it, the table layout remains the same. Just the data differs. This is my code for the table. 

    <script>
        function myFunction() {
            var input, filter, table, tr, td, cell, i, j;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("table");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                // Hide the row initially.
                tr[i].style.display = "none";
    
                td = tr[i].getElementsByTagName("td");
                for (var j = 0; j < td.length; j++) {
                    cell = tr[i].getElementsByTagName("td")[j];
                    if (cell) {
                        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            break;
                        }
                    }
                }
            }
        }
    
    </script>

    This is my code for the table.

      <table id="table" border="1">
            <tr class="header">
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Size)
                </th>
    
                <th>
                    @Html.DisplayNameFor(model => model.UploadedTime)
                </th>
    
                <th>
                    @Html.DisplayNameFor(model => model.MD5hash)
                </th>
    
                <th>
                    Download
                </th>
                <th>
                    Delete
                </th>
            </tr>
    
            @if (Model.Count() > 0)
            {
                foreach (var item in Model)
                {
                    <tr id="layouttable">
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
    
                        <td>
                            @{
                                long? KiloByte = @item.Size / 1024;
                                string NewSize = KiloByte + " KB";
                            }
                            @NewSize
                        </td>
    
                        <td>
                            @Html.DisplayFor(modelItem => item.CreatedTime)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.MD5hash)
                        </td>

    How can i make the main table header like fixed instead of changing everytime i search for something?

    Saturday, November 9, 2019 6:30 PM

Answers

  • User665608656 posted

    Hi JasonPhang,

    According to your description, if you want the column of your table to always be a fixed size, first you need to give your table a fixed width, or give the outer div of the table a fixed width, and set the percentage of the table width.

    After you set the table width, you need to set the column width ratio for the th column of the table.

    You can set the corresponding percentage according to your needs. The last column can be not set which be used to adapt, and ensure that the total column width ratio is less than 100%.

    I have made an example based on your needs, you can follow this code:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).on('input', 'input:text', function () {
                    var input, filter, table, tr, td, cell, i, j;
                    input = document.getElementById("myInput");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("table");
                    tr = table.getElementsByTagName("tr");
                    for (i = 1; i < tr.length; i++) {
                        // Hide the row initially.
                        tr[i].style.display = "none";
                        td = tr[i].getElementsByTagName("td");
                        for (var j = 0; j < td.length; j++) {
                            cell = tr[i].getElementsByTagName("td")[j];
                            if (cell) {
                                if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                    tr[i].style.display = "";
                                    break;
                                }
                            }
                        }
                    }
    
                })
    
            })
        </script>
    
    </head>
    <body>
        <div>
            <input id="myInput" type="text" /><br /><br />
    <div style="width:800px;background-color:antiquewhite">
    <table id="table" border="1" style="width:100%;border-collapse:collapse"> <tr class="header"> <th style="width:20%"> @Html.DisplayNameFor(model => model.EmplId)</th> <th style="width:50%"> @Html.DisplayNameFor(model => model.FirstName)</th> <th> @Html.DisplayNameFor(model => model.LastName)</th> </tr> @foreach (var item in Model) { <tr id="layouttable"> <td>@Html.DisplayFor(model => item.EmplId)</td> <td>@Html.DisplayFor(model => item.FirstName)</td> <td>@Html.DisplayFor(model => item.LastName)</td> </tr> } </table> </div> </div> </body> </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 11, 2019 2:54 AM
  • User665608656 posted

    Hi JasonPhang,

    Your solution was the right answer but just one more question, how do I put the table in the center of the page? i tried position : center but it did not work. 

    If you want to put your table in the middle of the page, you can add the following CSS style to your table:

    html, body {
        width: 100%;
    }
    #table {
        margin: 0 auto;
    }

    You can refer to this link :

    How to put table in the center of the page using CSS?

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 13, 2019 6:31 AM

All replies

  • User665608656 posted

    Hi JasonPhang,

    According to your description, if you want the column of your table to always be a fixed size, first you need to give your table a fixed width, or give the outer div of the table a fixed width, and set the percentage of the table width.

    After you set the table width, you need to set the column width ratio for the th column of the table.

    You can set the corresponding percentage according to your needs. The last column can be not set which be used to adapt, and ensure that the total column width ratio is less than 100%.

    I have made an example based on your needs, you can follow this code:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).on('input', 'input:text', function () {
                    var input, filter, table, tr, td, cell, i, j;
                    input = document.getElementById("myInput");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("table");
                    tr = table.getElementsByTagName("tr");
                    for (i = 1; i < tr.length; i++) {
                        // Hide the row initially.
                        tr[i].style.display = "none";
                        td = tr[i].getElementsByTagName("td");
                        for (var j = 0; j < td.length; j++) {
                            cell = tr[i].getElementsByTagName("td")[j];
                            if (cell) {
                                if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                    tr[i].style.display = "";
                                    break;
                                }
                            }
                        }
                    }
    
                })
    
            })
        </script>
    
    </head>
    <body>
        <div>
            <input id="myInput" type="text" /><br /><br />
    <div style="width:800px;background-color:antiquewhite">
    <table id="table" border="1" style="width:100%;border-collapse:collapse"> <tr class="header"> <th style="width:20%"> @Html.DisplayNameFor(model => model.EmplId)</th> <th style="width:50%"> @Html.DisplayNameFor(model => model.FirstName)</th> <th> @Html.DisplayNameFor(model => model.LastName)</th> </tr> @foreach (var item in Model) { <tr id="layouttable"> <td>@Html.DisplayFor(model => item.EmplId)</td> <td>@Html.DisplayFor(model => item.FirstName)</td> <td>@Html.DisplayFor(model => item.LastName)</td> </tr> } </table> </div> </div> </body> </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 11, 2019 2:54 AM
  • User-846837922 posted

    Your solution was the right answer but just one more question, how do I put the table in the center of the page? i tried position : center but it did not work. 

    Tuesday, November 12, 2019 1:20 PM
  • User665608656 posted

    Hi JasonPhang,

    Your solution was the right answer but just one more question, how do I put the table in the center of the page? i tried position : center but it did not work. 

    If you want to put your table in the middle of the page, you can add the following CSS style to your table:

    html, body {
        width: 100%;
    }
    #table {
        margin: 0 auto;
    }

    You can refer to this link :

    How to put table in the center of the page using CSS?

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 13, 2019 6:31 AM