Question

我有一个名单列表：第一个和最后一个。列表很长，所以我需要一个滚动条菜单。当我滚动时，我应该只滚动名称而不是列标题。我设法这样做但问题是第二列元素没有显示在列名称的正下方，您可以在此处看到http://jsfiddle.net/MmLQL/44/。

   <table border=1 width=200px >
    <tr>
                    <th>First Name</th>
                    <th>looong column name </th>
    </tr>

    </table>
    <div  class="div_scroll">
        <table border=1 width=200px  >
               <tr>
                   <td>John</td>
                   <td>Smith</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                </tr>
            </table>
    </div>

即使我将标题和内容放在同一个表中，并创建一个div来包装表内容并向该div添加一个类来启用滚动，它也不起作用http://jsfiddle.net/MmLQL/43/

我做错了什么？

Answer 1

你可能不需要javascript。只需将列的宽度设置为相等即可。这是一个简单的例子：

th, td { width: 50%; }

View it on JSFiddle

Answer 2

您需要为每个表设置列的宽度相同。也许为每列创建一个css类，并将它们应用到表中的列。

示例CSS类：

.ColumnOne { width: 40%; }
.ColumnTwo { width: 60%; }

然后应用于列：

<table border=1 width=200px >
  <tr>
    <th class="ColumnOne">First Name</th>
    <th class="ColumnTwo">looong column name </th>
  </tr>
</table>
<div  class="div_scroll">
  <table border=1 width=200px  >
   <tr>
     <td class="ColumnOne">John</td>
     <td class="ColumnTwo">Smith</td>
   </tr>
...

如何创建滚动条菜单，仅滚动内容而不是标题

2 个答案: