HTML CSS不能改变表列宽度

HTML CSS Cannot Change Table Column Width

本文关键字：能改变 CSS 不能 HTML      更新时间：2023-09-26

我使用一些代码从"http://dotnetprof.blogspot.com/2012/08/html-table-search-using-javascript.html"来帮助我建立一个可搜索的表为我的网站。

我在编辑列宽度时有麻烦。我尝试了几种不同的方法，包括使用"col style="width:5%;"，如下图所示。

是否有一些功能在代码中自动调整列的宽度，使我不能编辑它们?我看过所有类似问题的解决方案，张贴在这里，没有一个工作。任何帮助都是感激的。

<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>

你限制了。containerdiv的宽度

使表处于最小宽度，因此不能对列进行操作。

如果你将。container的宽度设置为90%或100%，它可以工作

http://jsfiddle.net/pE2f5/

 .container { width: 100%; margin: 0 auto;}
相关文章：