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.
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>
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:
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.
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:
Member
5 Points
20 Posts
How to have fixed table shape when searching
Nov 09, 2019 06:30 PM|JasonPhang|LINK
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.
This is my code for the table.
How can i make the main table header like fixed instead of changing everytime i search for something?
Contributor
3710 Points
1043 Posts
Re: How to have fixed table shape when searching
Nov 11, 2019 02:54 AM|Yongqing Yu|LINK
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:
Here is the result of this work demo:
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
5 Points
20 Posts
Re: How to have fixed table shape when searching
Nov 12, 2019 01:20 PM|JasonPhang|LINK
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.
Contributor
3710 Points
1043 Posts
Re: How to have fixed table shape when searching
Nov 13, 2019 06:31 AM|Yongqing Yu|LINK
Hi JasonPhang,
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.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.