24

我有一个 HTML 表格,如下面的代码所示。这有 16 列。我正在使用 javascript 设置单元格宽度。当总宽度小于 100% 时,它工作正常。

当总宽度超过 100% 时,我想显示一个horizontal scroll bar. 但是当我将黄色突出显示的单元格的宽度从 5% 更改为 30% 时,所有剩余的单元格都被隐藏而不是滚动条的外观。

问题

  1. 为什么滚动条目前没有出现?
  2. 我们如何通过展示使其正常工作scroll bar?(黄色列之后的两列也应该visible;不隐藏)

注意:该问题在IE8中注明。

注意:有关代码,请参阅http://jsfiddle.net/Lijo/dYSfN/2/。这没有显示问题。为了可视化问题,请将代码复制到 html 文件中并使用 IE8 打开

更新

hiding a columnFirefox 和 Chrome 中,剩余的列宽度会自动调整为表格宽度,但在 IE8 中则不会。在 IE8 中,表格宽度shrinks

http://srikanthgade.blogspot.in/2010/09/ie8-standards-table-layout-fixed.html#!/2010/09/ie8-standards-table-layout-fixed.html

问题详情

黄色高亮单元格宽度为 5% 时

在此处输入图像描述

黄色高亮单元格宽度为 30% 时

在此处输入图像描述

风格

   .gridTableBorder
   {
        overflow:scroll;
        border: 2px solid green;
   }

    /*GridView Tables*/
    .resultGridTable
    {
        table-layout: fixed; /*Needed along with word wrap */
    }

    .resultGridTable th
    {
        background-color: #A7A7A6;
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        font: bold 9pt Arial;
        border: 1px solid red;
        word-wrap: break-word;
    }

    .resultGridTable td
    {
        padding: 0px 5px 0px 5px;
        font: normal 9pt Arial;
        word-wrap: break-word;
        border: 1px solid blue;
    }

JAVASCRIPT

    $(document).ready(function () {


        //Width Setting
        var numberOfColumns = 16;
        $('.resultGridTable th, .resultGridTable td').each(function (i) {


            if (i % numberOfColumns == 0) {
                $(this).css('width', '1%');
            }

            if (i % numberOfColumns == 1) {
                $(this).css('width', '10%');
            }

            if (i % numberOfColumns == 2) {
                $(this).css('width', '9%');

            }

            if (i % numberOfColumns == 3) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 4) {
                $(this).css('width', '6%');
            }
            if (i % numberOfColumns == 5) {
                $(this).css('width', '8%');
            }
            if (i % numberOfColumns == 6) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 7) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 8) {
                $(this).css('width', '5%');
            }

            ///
            if (i % numberOfColumns == 9) {
                $(this).css('width', '7%');
            }
            if (i % numberOfColumns == 10) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 11) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 12) {
                $(this).css('width', '5%');
            }

            if (i % numberOfColumns == 13) {
                $(this).css('width', '30%');
                $(this).css('background-color', 'Yellow');
            }

            if (i % numberOfColumns == 14) {
                $(this).css('width', '7%');
            }

            if (i % numberOfColumns == 15) {
                $(this).css('width', '7%');
            }

        }
        );


        //Hide Is Summary Row Column
        var selectedElements = $("tr").find("th:first, td:first");
        $(selectedElements).hide();


    }
    );

HTML

<body>
<form method="post" action="LocalTaxReport.aspx" id="form1">
<div id="wrapper">
    <div id="container">
        <div id="centralContainer">
            <div id="mainContainer">
                <div id="contentHolderDiv" class="contentHolderDiv">
                    <div id="resultContainer" class="resultContainerDiv">
                        <div id="gridDiv" class="gridTableBorder">
                            <div>
                                <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"
                                    style="border-collapse: collapse;">
                                    <tr>
                                        <th scope="col">
                                            IsSummaryRow
                                        </th>
                                        <th scope="col">
                                            Associate
                                        </th>
                                        <th scope="col">
                                            My Amount
                                        </th>
                                        <th scope="col">
                                            Federal Withholding
                                        </th>
                                        <th scope="col">
                                            Social Security
                                        </th>
                                        <th scope="col">
                                            Medicaring
                                        </th>
                                        <th scope="col">
                                            State Tax
                                        </th>
                                        <th scope="col">
                                            County Tax
                                        </th>
                                        <th scope="col">
                                            City Tax
                                        </th>
                                        <th scope="col">
                                            Total
                                        </th>
                                        <th scope="col">
                                            State
                                        </th>
                                        <th scope="col">
                                            State Code
                                        </th>
                                        <th scope="col">
                                            County
                                        </th>
                                        <th scope="col">
                                            County Code
                                        </th>
                                        <th scope="col">
                                            City
                                        </th>
                                        <th scope="col">
                                            City Code
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            False
                                        </td>
                                        <td>
                                            Mary Dryden
                                        </td>
                                        <td>
                                            $3450
                                        </td>
                                        <td>
                                            $32
                                        </td>
                                        <td>
                                            $5
                                        </td>
                                        <td>
                                            $2
                                        </td>
                                        <td>
                                            $10
                                        </td>
                                        <td>
                                            $1
                                        </td>
                                        <td>
                                            $2
                                        </td>
                                        <td>
                                            $3400
                                        </td>
                                        <td>
                                            Arkansas
                                        </td>
                                        <td>
                                            AR
                                        </td>
                                        <td>
                                            Benton
                                        </td>
                                        <td>
                                            04567
                                        </td>
                                        <td>
                                            Bentonville
                                        </td>
                                        <td>
                                            23156
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
</form>

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

</body>
4

5 回答 5

18

我试图通过很少的修改来达到你想要的效果,我将在这里描述它。

  1. 您需要设置doctype. DOCTYPE 声明对于大多数当前的标记语言都是强制性的,没有它就不可能可靠地验证文档或确定要应用哪些规则。

  2. 您看不到滚动条,因为未设置表格的宽度。div 默认采用100%. 现在将overflow属性设置为 div,然后将表格的宽度设置为120%(超过 div 的100%)以查看滚动条。

  3. 表宽120%并不意味着您可以将所有列宽之和为120. 由于,即使您将表格宽度设置为table-layout:fixed,您也需要将所有列宽度的总和计算为。100120%

  4. 在您的代码中,您设置了所有列和行的宽度,而不是将宽度仅应用于th或将应用于所有行中的所有列(整个表)的第一行。

  5. 将您的代码从使用修改if..if..if为使用if..else if..else if

注意: 4 和 5 是对现有代码的改进。

演示:http: //jsfiddle.net/FP7MF/2/embedded/result/

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>My Report </title>
    <style type="text/css">

        /*GridView Tables*/
        .resultGridTable
        {
            table-layout: fixed; 
            width: 130%;
        }

        .resultGridTable th
        {
            background-color: #A7A7A6;
            color: #ffffff;
            padding: 2px 5px 2px 5px;
            font: bold 9pt Arial;
            border: 1px solid red;
            word-wrap: break-word;
        }

        .resultGridTable td
        {
            padding: 0px 5px 0px 5px;
            font: normal 9pt Arial;
            word-wrap: break-word;
            border: 1px solid blue;
        }

        #gridDiv div { overflow: auto;  }

    </style>
</head>
<body>
    <form>
        <div id="wrapper">
            <div id="container">
                <div id="centralContainer">
                    <div id="mainContainer">
                        <div id="contentHolderDiv" class="contentHolderDiv">
                            <div id="resultContainer" class="resultContainerDiv">
                                <div id="gridDiv" class="gridTableBorder">
                                    <div>
                                        <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"
                                             style="border-collapse: collapse;">
                                           <tr>
                                              <th scope="col">IsSummaryRow</th>
                                              <th scope="col">Associate</th>
                                              <th scope="col">My Amount</th>
                                              <th scope="col">Federal Withholding</th>
                                              <th scope="col">Social Security</th>
                                              <th scope="col">Medicaring</th>
                                              <th scope="col">State Tax</th>
                                              <th scope="col">County Tax</th>
                                              <th scope="col">City Tax</th>
                                              <th scope="col">Total</th>
                                              <th scope="col">State</th>
                                              <th scope="col">State Code</th>
                                              <th scope="col">County</th>
                                              <th scope="col">County Code</th>
                                              <th scope="col">City</th>
                                              <th scope="col">City Code</th>
                                           </tr>
                                           <tr>
                                               <td>False</td>
                                               <td>Mary Dryden</td>
                                               <td>$3450</td>
                                               <td>$32</td>
                                               <td>$5</td>
                                               <td>$2</td>
                                               <td>$10</td>
                                               <td>$1</td>
                                               <td>$2</td>
                                               <td>$3400</td>
                                               <td>Arkansas</td>
                                               <td>AR</td>
                                               <td>Benton</td>
                                               <td>04567</td>
                                               <td>Bentonville</td>
                                               <td>23156</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
               </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

    <script type="text/javascript">


        $(document).ready(function () {


            //Width Setting
            var numberOfColumns = 16;
            $('.resultGridTable th').each(function (i) {

                if (i % numberOfColumns == 0) {
                    $(this).css('width', '1%');
                } else if (i % numberOfColumns == 1) {
                    $(this).css('width', '10%');
                } else if (i % numberOfColumns == 2) {
                    $(this).css('width', '9%');
                } else if (i % numberOfColumns == 3) {
                    $(this).css({'width': '8%', 'background-color': 'orange'});
                } else if (i % numberOfColumns == 4) {
                    $(this).css('width', '6%');
                } else if (i % numberOfColumns == 5) {
                    $(this).css('width', '8%');
                } else if (i % numberOfColumns == 6) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 7) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 8) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 9) {
                    $(this).css('width', '7%');
                } else if (i % numberOfColumns == 10) {
                    $(this).css({'width': '8%', 'background-color': 'orange'});
                } else if (i % numberOfColumns == 11) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 12) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 13) {
                    $(this).css({'width': '8%', 'background-color': 'Yellow'});
                } else if (i % numberOfColumns == 14) {
                    $(this).css('width', '5%');
                } else if (i % numberOfColumns == 15) {
                    $(this).css('width', '5%');
                }

            });

            //Hide Is Summary Row Column
            var selectedElements = $("tr").find("th:first, td:first");
            $(selectedElements).hide();
        });

    </script>
</body>
</html>
于 2012-11-30T21:53:22.453 回答
2

这不是一个完美的解决方案,但是将表格宽度设置为 120% 并将列宽更改为表格宽度的百分比(因此它们总和为 100%)可以达到预期的效果。

于 2012-11-30T11:11:36.077 回答
1

如果我错了,请原谅我,但这不能通过overflow:scroll;为包含表格的 div 添加为 css 规则来解决吗?

于 2012-11-28T11:44:32.773 回答
1

如果我们需要在 IE8 中保持表格布局不变,则需要在隐藏列后添加以下解决方法:

:
:
$(selectedElements).hide();

// Add the workaround after the above line (or when hiding of columns is done).
$(".resultGridTable").attr("style","display:inline-table;");
window.setTimeout(function(){$(".resultGridTable").attr("style","");},0);

这是 IE8 中的一个错误,但微软似乎没有对任何解决方案做出回应。如果您发现任何信息,请在此处发布。

但是我已经尝试了解决方法,但它仍然没有提供所需的输出。

只是在这里添加它,以便它可能有助于更多的研发。

参考:

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/f265c5b1-a45d-4949-85b2-86a97a884dc1/

解决方法:

当列隐藏在具有 table-layout:fixed 的表中时,IE8 不会调整 tbody 或 thead 的大小

http://srikanthgade.blogspot.in/2010/09/ie8-standards-table-layout-fixed.html

于 2012-12-01T13:15:16.493 回答
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gridTableBorder
   {
        overflow:scroll;
        border: 2px solid green;
   }

    /*GridView Tables*/
    .resultGridTable
    {
        /*table-layout: fixed;*/ /*Needed along with word wrap */
    }

    .resultGridTable th
    {
        background-color: #A7A7A6;
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        font: bold 9pt Arial;
        border: 1px solid red;
        /*word-wrap: break-word;*/
    }

    .resultGridTable td
    {
        padding: 0px 5px 0px 5px;
        font: normal 9pt Arial;
        /*word-wrap: break-word;*/
        border: 1px solid blue;
    }
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
<script type="text/javascript">

$(document).ready(function () {


        //Width Setting
        var numberOfColumns = 16;
        $('.resultGridTable th, .resultGridTable td').each(function (i) {


            if (i % numberOfColumns == 0) {
                $(this).css('width', '1%');
            }

            if (i % numberOfColumns == 1) {
                $(this).css('width', '10%');
            }

            if (i % numberOfColumns == 2) {
                $(this).css('width', '9%');

            }

            if (i % numberOfColumns == 3) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 4) {
                $(this).css('width', '6%');
            }
            if (i % numberOfColumns == 5) {
                $(this).css('width', '8%');
            }
            if (i % numberOfColumns == 6) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 7) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 8) {
                $(this).css('width', '5%');
            }

            ///
            if (i % numberOfColumns == 9) {
                $(this).css('width', '7%');
            }
            if (i % numberOfColumns == 10) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 11) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 12) {
                $(this).css('width', '5%');
            }

            if (i % numberOfColumns == 13) {
                $(this).css('width', '30%');
                $(this).css('background-color', 'Yellow');
            }

            if (i % numberOfColumns == 14) {
                $(this).css('width', '7%');
            }

            if (i % numberOfColumns == 15) {
                $(this).css('width', '7%');
            }

        }
        );


        //Hide Is Summary Row Column
        var selectedElements = $("tr").find("th:first, td:first");
        $(selectedElements).hide();


    }
    );
</script>
</head>

<body>

<form method="post" action="LocalTaxReport.aspx" id="form1">
<div id="wrapper">
    <div id="container">
        <div id="centralContainer">
            <div id="mainContainer">
                <div id="contentHolderDiv" class="contentHolderDiv">
                    <div id="resultContainer" class="resultContainerDiv">
                        <div id="gridDiv" class="gridTableBorder">
                            <div>
                                <table class="resultGridTable" cellspacing="1" id="detailContentPlaceholder_grdLocalTaxReport" style="border-collapse: collapse;">
                                    <tr>
                                        <th scope="col">
                                            IsSummaryRow
                                        </th>
                                        <th scope="col">
                                            Associate
                                        </th>
                                        <th scope="col">
                                            My Amount
                                        </th>
                                        <th scope="col">
                                            Federal Withholding
                                        </th>
                                        <th scope="col">
                                            Social Security
                                        </th>
                                        <th scope="col">
                                            Medicaring
                                        </th>
                                        <th scope="col">
                                            State Tax
                                        </th>
                                        <th scope="col">
                                            County Tax
                                        </th>
                                        <th scope="col">
                                            City Tax
                                        </th>
                                        <th scope="col">
                                            Total
                                        </th>
                                        <th scope="col">
                                            State
                                        </th>
                                        <th scope="col">
                                            State Code
                                        </th>
                                        <th scope="col">
                                            County
                                        </th>
                                        <th scope="col">
                                            County Code
                                        </th>
                                        <th scope="col">
                                            City
                                        </th>
                                        <th scope="col">
                                            City Code
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            False
                                        </td>
                                        <td>
                                            Mary Dryden
                                        </td>
                                        <td>
                                            $3450
                                        </td>
                                        <td>
                                            $32
                                        </td>
                                        <td>
                                            $5
                                        </td>
                                        <td>
                                            $2
                                        </td>
                                        <td>
                                            $10
                                        </td>
                                        <td>
                                            $1
                                        </td>
                                        <td>
                                            $2
                                        </td>
                                        <td>
                                            $3400
                                        </td>
                                        <td>
                                            Arkansas
                                        </td>
                                        <td>
                                            AR
                                        </td>
                                        <td>
                                            Benton
                                        </td>
                                        <td>
                                            04567
                                        </td>
                                        <td>
                                            Bentonville
                                        </td>
                                        <td>
                                            23156
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
</form>

</body>
</html>

我刚刚解决了你的问题,我对你的代码和 css 做了一些研发。我刚刚删除了 table-layout:fixed 和 word-wrap:break-word;

这在 IE8 和 IE7 中都存在问题。在屏幕截图 2 中,由于 word-wrap:break-word 导致单元格高度增加。

在其他浏览器中它工作正常。只需复制代码并在浏览器中检查即可。如果您的需求在不使用 table-layout:fixed 和 word-wrap css 属性的情况下得到满足,那么这就是您的解决方案。

@Lijo 如果我遗漏了什么,请告诉我。

于 2012-12-05T07:15:08.693 回答