как сделать меню полосы прокрутки из нескольких столбцов похожим на таблицу Excel

Question

как сделать меню полосы прокрутки из нескольких столбцов похожим на таблицу Excel

0

Я хотел бы отобразить список лиц и сделать имена и фамилии в двух отдельных столбцах. Я также должен иметь возможность прокручивать по вертикали. Он отлично работает, но я бы хотел, чтобы экран выглядел как таблица Excel. т.е. я пытаюсь отобразить заголовок каждого столбца, что-то вроде этого:

  first     last
  John      Smith
  John      Doe

Вот jsfiddle http://jsfiddle.net/MmLQL/11/ Когда я пытаюсь добавить заголовки "первая" и "последняя" и горизонтальная строка ниже, она добавляет их по вертикали:

first   john
last     Smith
john     Doe

Спасибо вам за помощь!

user1499220 19 сен. 2013, в 17:32

Источник

Теги:

html

css

scrollbar

4 ответа

0

Я думаю, вам нужен этот 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 равно follows-

Rajesh Paul 19 сен. 2013, в 16:43

0

перестройте свой код ниже

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

}

Надеюсь, это так, как вы ожидали

Vidiya Prasanth 19 сен. 2013, в 14:25

0

Это табличные данные, используйте таблицу.

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

cimmanon 19 сен. 2013, в 14:08

Ещё вопросы

Vladimir · Accepted Answer · 2013-09-19T13-29-00.000Z

Прежде всего, вы не должны использовать 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;
}

это ничего не изменило :( jsfiddle.net/MmLQL/23
это потому что вы не изменили html посмотрите на мой пример jsfiddle.net/8VA7m