html - 複数列のスクロール バー メニューを Excel スプレッドシートのように見せる方法

Question

人のリストを表示し、姓と名を 2 つの列に分けて表示したいと思います。縦スクロールもできるはずです。うまくいきますが、画面をExcelスプレッドシートのように見せたいです。つまり、各列のタイトルを次のように表示しようとしています。

  first     last
  John      Smith
  John      Doe

ここにjsfiddleがありますhttp://jsfiddle.net/MmLQL/11/ タイトル「最初」と「最後」と水平線を追加しようとすると、垂直に追加されます：

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 を 2 回使用するべきではありませんが、とにかくこれを試すことができます。

#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 は次のとおりです。