Question

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

  first     last
  John      Smith
  John      Doe

这是一个jsfiddle http://jsfiddle.net/MmLQL/11/ 当我尝试添加标题＆＃34;首先＆＃34;和＆＃34;最后＆＃34;并在下面的水平线上，它们垂直添加：

first   john
last     Smith
john     Doe

感谢您的帮助！

Answer 1

首先你不应该使用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 2

重构您的代码，如下所示

<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 3

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

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;
}

Answer 4

我想你想要 Fiddle_Demo

HTML code：

<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如下 -

o/p

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

4 个答案:

HTML code：

CSS代码：