html - 如何使多列滚动条菜单看起来像 Excel 电子表格

Question

我想显示一个人员列表，并将名字和姓氏放在两个单独的列中。我也应该能够垂直滚动。它工作正常，但我希望屏幕看起来像一个 Excel 电子表格。即，我正在尝试显示每列的标题，如下所示：

  first     last
  John      Smith
  John      Doe

这是一个 jsfiddle http://jsfiddle.net/MmLQL/11/ 当我尝试添加标题“first”和“last”以及下面的水平线时，它会垂直添加它们：

first   john
last     Smith
john     Doe

谢谢你的帮助！

Answer 1

重组你的代码如下

<div runat="server" id="div_scroll">
   <div runat="server" id="div_all_columns">

        <div runat="server" id="div_column">
            <p >First</p>
            <p> John </p><p> John </p> <p>John </p>
       </div>
         <div runat="server" id="div_column">
             <p >Last</p>
             <p>Smith </p><p>Doe </p> <p>Smith </p>
       </div>
   </div>
</div>

向css添加一个额外的类，如下所示

div p
{
   border:solid 1px black;

}

希望如你所料

Answer 2

首先你不应该使用 id 两次，但无论如何你可以试试这个：

#div_all_columns
{

   -moz-column-count: 2;
   -webkit-column-count: 2;
    column-count: 2
    width: 380x; 
    padding: 10px;  
    display: table;
}

#div_column
{  
    font-size:90%;
    display: table-row-group;
    margin:4px;
}

p
{
    display: table-cell;
    text-align: justify;
}

Answer 3

我想你想要这个Fiddle_Demo

HTML 代码：

<div runat="server" id="div_scroll">
   <div runat="server" id="div_all_columns">
        <div runat="server" id="div_column" class="inner_div">
            <span style="border:3px solid green; font-size:20px">
                FirstName
            </span>
            <p> John <br/> John  <br/> John <br/></p>
       </div>
         <div runat="server" id="div_column" class="inner_div">
            <span style="border:3px solid green; font-size:20px">
                LastName
            </span>
            <p>Smith <br/>Doe <br/> Smith</p>
       </div>         
   </div>
</div>

CSS 代码：

#div_scroll {
overflow: auto;
//max-width: 100px; 
//max-height: 50px; 
}

.inner_div {
overflow: scroll;
width:120px;
height: 80px;
}

#div_all_columns
{

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

width: 280px; 
//padding: 10px;  
}

#div_column
{  font-size:90%;
   margin:4px;
}
p
{
    text-align: justify;
}

o / p如下 -

Answer 4

这是表格数据，使用表格。

http://jsfiddle.net/MmLQL/26/

<div runat="server" id="div_scroll">
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Smith</td>
            </tr>
        </tbody>
    </table>
</div>

#div_scroll {
    overflow: scroll;
    width: 400px;
    height: 100px;
}

#div_scroll table {
    width: 100%;
    font-size: 90%;
}

#div_scroll thead {
    display: none;
}