HTML CSS Cannot Change Table Column Width

Question

I am using some code from " http://dotnetprof.blogspot.com/2012/08/html-table-search-using-javascript.html " to help me build a searchable table for my website.

I am having trouble editing the column widths. I have tried several different methods, including using "col style="width:5%;" as shown below.

Is there some feature in the code that's automatically adjusting the column widths so that I cannot edit them? I've looked at the solutions for all similar questions posted here and none have worked. Any help is appreciated.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seacrh HTML table using Javascript</title>

<style type="text/css">
    body { font-family: Verdana; font-size: 12pt; }
    .container { width: 35%; margin: 0 auto; }
    .search_box { padding: 1.5%; font-family: Verdana; font-size: 12pt; }
</style>

<script type="text/javascript">
    function doSearch() {
        var searchText = document.getElementById('searchTerm').value;
        var targetTable = document.getElementById('dataTable');
        var targetTableColCount;

        //Loop through table rows
        for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
            var rowData = '';

            //Get column count from header row
            if (rowIndex == 0) {
                targetTableColCount =     targetTable.rows.item(rowIndex).cells.length;
                continue; //do not execute further code for header row.
            }

            //Process data rows. (rowIndex >= 1)
            for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
                var cellText = '';

                if (navigator.appName == 'Microsoft Internet Explorer')
                    cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
                else
                    cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;

                rowData += cellText;
            }

            // Make search case insensitive.
            rowData = rowData.toLowerCase();
            searchText = searchText.toLowerCase();

            //If search term is not found in row data
            //then hide the row, else show
            if (rowData.indexOf(searchText) == -1)
                targetTable.rows.item(rowIndex).style.display = 'none';
            else
                targetTable.rows.item(rowIndex).style.display = 'table-row';
        }
    }
</script>
</head>
<body>
<div class="container">
    <h2>Seacrh HTML table using Javascript</h2>
    <input type="text" id="searchTerm" class="search_box" onkeyup="doSearch()" />
    <!--<input type="button" id="searchBtn" value="Search" class="search_box"     onclick="doSearch()" />-->
    <br /><br />
    <table id="dataTable" border="1" width="100%" cellspacing="0" cellpadding="5">
        <col style="width:5%;"></col>
        <col style="width:30%"></col>
        <col style="width:100%"></col>
        <col style="width:55%"></col>
        <col style="width:5%"></col>
        <thead>
        <tbody>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Dates Lived</th>
                <th>Comments</th>
                <th>Rating</th>
            </tr>
        </thead>
        <tr>
            <td>Nikhil Vartak</td>
            <td>4224 3rd St., San Francisco, CA 94112</td>
            <td>3/3/2000-4/7/2004</td>
            <td>Fantastic</td>
            <td>3/5</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Answer 1

you are limiting the .container div in width

that makes the table be at it's minimum width,so no manipulations are possible with columns.

if instead you would set the .container width to 90% or 100% ,it works

http://jsfiddle.net/pE2f5/

 .container { width: 100%; margin: 0 auto;}

HTML CSS Cannot Change Table Column Width

Question

1 answers

solution1
0 2014-06-08 20:23:26

HTML CSS Cannot Change Table Column Width

Question

1 answers

solution1 0 2014-06-08 20:23:26

solution1
0 2014-06-08 20:23:26