0

我有一个名字列表：第一个和最后一个。列表很长，所以我需要一个滚动条菜单。当我滚动时，我应该只滚动名称而不是列标题。我设法做到了，但问题是第二列元素没有显示在列名下方，如您在此处看到的 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/

我究竟做错了什么？

4

2 回答 2

3

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

th, td { width: 50%; }

在 JSFiddle 上查看

于 2013-10-04T18:21:30.443 回答
0

您需要将每个表格的列宽设置为相同。也许为每一列创建一个 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>
...
于 2013-10-04T18:25:45.987 回答