Question

我(至少)希望把我的超文本表第一栏作为固定栏目。其余各栏应横向发展。如果表垂直滚动,静态栏和其他栏应合并。

在旧版本的IEE中,你可以使用CSS表达方式来做到这一点。 http://www.javascripttool Box.com/lib/scrollingdatagrid/“rel=“nofollow”http://www.javascripttool Box.com/lib/scrollingdatagrid/。

任何想法,如何将其转化为超文本、中文本系统和 Java本解决方案(交叉浏览器)?

这是我迄今提出的:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="position: relative; display: block; width: 200px;">
        <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
            <table>
                <tbody>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                </tbody>
            </table>
        </div></div>
            </div>
    </body>
</html>

Answer 1

我认为,我找到了一种解决办法,似乎可以在IEE和Mok:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
        <script type="text/javascript">
            function scrollTable() {
                var column1 = $("#dailyWorkColumn1");
                var column2 = $("#dailyWorkColumn2");
                column1.scrollTop(column2.scrollTop());
                }

            $(document).ready(function() {
                var column2 = $("#dailyWorkColumn2");
                var column2right = $( #dailyWorkColumn2 tbody td:nth-child(2) )[0].offsetLeft;
                column2.scrollLeft(column2right);
                });
        </script>
        <style type="text/css">
            .dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; }
            .dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; }
        </style>
    </head>
    <body>
       <div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;">
            <div class="dailyWorkColumn1" id="dailyWorkColumn1">
                <table style="width: 100px;">
                    <tr>
                        <td style="border: 1px solid purple;">Jason</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Jeff</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Dave</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Mike</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Michael</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Lori</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Ashley</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Sean</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Louis</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Chris</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Aaron</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Marie</td>
                    </tr>
                </table>
            </div>
            <div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();">
                <table>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            223456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            323456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            423456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            523456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            623456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            723456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            823456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            923456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            103456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            113456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                </table>
            </div>
       </div> 
    </body>
</html>

Answer 2

您应尝试使用jquery plugin for the same link to plugin

Answer 3

遵循法典,横向发展:

<html>
<head>
<style>
.grid { width: 300px; height: auto; overflow: auto; }
.grid td.static { width: 100px; position: fixed; background-color: white; }
.grid td.dynamic { width: 100px; }
.grid td { border: solid 1px black; }
.grid table { width: 500px; }
</style>
</head>
<body>
  <div class= grid >
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class= static >Header 1</td>
        <td class= dynamic c1 >Cell 1A</td>
        <td class= dynamic c2 >Cell 1B</td>
        <td class= dynamic c3 >Cell 1C</td>
        <td class= dynamic c4 >Cell 1D</td>
      </tr>
      <tr>
        <td class= static >Header 2</td>
        <td class= dynamic c1 >Cell 2A</td>
        <td class= dynamic c2 >Cell 2B</td>
        <td class= dynamic c3 >Cell 2C</td>
        <td class= dynamic c4 >Cell 2D</td>
      </tr>
      <tr>
        <td class= static >Header 3</td>
        <td class= dynamic c1 >Cell 3A</td>
        <td class= dynamic c2 >Cell 3B</td>
        <td class= dynamic c3 >Cell 3C</td>
        <td class= dynamic c4 >Cell 3D</td>
      </tr>
      <tr>
        <td class= static >Header 4</td>
        <td class= dynamic c1 >Cell 4A</td>
        <td class= dynamic c2 >Cell 4B</td>
        <td class= dynamic c3 >Cell 4C</td>
        <td class= dynamic c4 >Cell 4D</td>
      </tr>
    </table>
  </div>
</body>
</html>

Answer 4

也许不是最佳解决办法,而是在我看到你的榜样时我所想的:

表格2、案件第一栏为表格,第二栏和第三栏为第一(统计)表格旁边的iframe右边的表。如果没有任何联合材料,你就会这样做。可以肯定的是,你的第一栏独立于其他栏目,但你肯定会产生预期的滚动效应。

友情链接