Отображение табличных данных с головкой таблицы слева, а не сверху

У меня проблемы с моим CSS. Я пытаюсь сделать отображение информации в 2 столбцах, обозначенных классами .left и .right.Отображение табличных данных с головкой таблицы слева, а не сверху

You can see the issues at my jsFiddle

источник

2012-04-18 JDV590

Есть вопросы/вопрос? – Faust

@Faust Да .... Я предполагаю, что это был запутанный способ спросить меня, что не так с моей разметкой/css. Вы можете просмотреть ее, щелкнув ссылку «Здесь», перейдя к моей js скрипке – JDV590

Я сделал соответствующие изменения, чтобы сделать это более простым вопросом – JDV590

EDIT: изменяющий ответ, основанный на комментариях.

Вы показываете табличные данные, поэтому используйте Таблицы. Вы можете избежать вложенных таблиц с помощью тега tbody, как показано на примере this similar question:

Для этого решения вы создадите таблицу. Каждый TBODY будет представлять собой одну «группу» данных. В каждой группе первый столбец будет для метаданных (например, THEAD), а второй столбец будет фактические данные:

<table> 
    <tbody> <!-- First Set of Data --> 
    <tr> 
     <td> Sessions </td> 
     <td> 1 </td> 
    </tr> 
    <tr> 
     <td> Date </td> 
     <td> 1/1/2003 </td> 
    </tr> 
    ... 
    </tbody> 
    <tbody> <!-- Second set of Data --> 
    <tr> 
     <td> Sessions </td> 
     <td> 5 </td> 
    </tr> 
    ... 
    </tbody> 
</table>

Вы можете стиль более легко, используя внешнюю таблицу стилей, возможно, с помощью :nth-child и/или тег colgroup или Javascript.

Вы также можете получить больше ответов, если переименовать свой вопрос на что-то вроде "How to display tabular data with left hand column as key".

источник

2012-04-18 19:39:09 chris

Ваше оригинальное решение было почти идеальным. Если у меня есть что-то со многими строками, мне бы хотелось, чтобы это выглядело примерно так: [Пример JSFIDDLE] (http://jsfiddle.net/WSEH4/50/). Я использовал свой пример, за исключением того, я все еще получаю подобные вопросы, в верхнем левом углу – JDV590

Я хотел Sessions Дата Тема Major Due Даты показать на каждой строке – JDV590

я вижу, что вы пытаетесь сделать. Если вы не собираетесь менять макет на основе размера - если вы всегда хотите, чтобы он выглядел одинаково, то таблицы, вероятно, будут лучшим решением - это так? – chris

Вот способ сделать то, что вы пытаетесь сделать, не используя позиционирование в aboslute (которое подвержено взлому).

http://jsfiddle.net/WSEH4/33/

В основном, с использованием инлайн-блоков гарантирует, что элементы не будут перекрываться, если CSS неправильно. Однако лучшим решением вашей проблемы было бы просто использовать таблицы. Таблицы существуют для ситуаций, подобных этому, с помощью системы label/value.

источник

2012-04-18 19:41:00 Jake

В качестве альтернативы вы можете сделать это с помощью плавающего. Пример показан с помощью демонстрации.

http://jsfiddle.net/WSEH4/36/

источник

2012-04-18 19:43:07 irfanmcsd

Я предпочитаю использовать дивы над пролетами: (jsFiddle: http://jsfiddle.net/WSEH4/44/)

HTML:

<!DOCTYPE html>

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 
    <div style="display: block;"> 
     <div class="child">Where</div> 
     <div class="child">China</div> 
     <div class="clear"/> 

     <div class="child">Voltage</div> 
     <div class="child">220 V</div> 
     <div class="clear"/> 

     <div class="child">Frequency</div> 
     <div class="child">50 HZ</div> 
     <div class="clear"/> 

     <div class="child">Plug Type</div> 
     <div class="child">USA</div> 
     <div class="clear"/> 
    </div> 
</body>

CSS:

.child 
{ 
    float: left; 
    top: 6px; 
    left: 6px; 
    width: 25%; 
    padding-right: 10px; 
    white-space: nowrap; 
    border-bottom: 1px solid #eee; 
} 

.clear 
{ 
    clear: both; 
    display: block;  
}

источник

2012-04-18 19:43:10

Эй, вы можете сделать это, как этот

Css

div{ 
margin-top:10px; 
} 
.right{ 
float:left; 
    width:50%; 
border-right:solid 1px red;  
} 
.left{ 
    float:right; 
}

HTML

<div style="display: block;width:200px;overflow: hidden;"> 

    <div class="right">China</div> 
    <div class="left">Plug Type</div> 

    <div class="right">220 V</div> 
    <div class="left">Frequency</div> 

    <div class="right">50 HZ</div> 
    <div class="left">Voltage</div> 

    <div class="right">USA</div> 
    <div class="left">Where</div> 



</div>

Демо-версия http://jsfiddle.net/rohitazad/WSEH4/52/

источник

2012-04-19 08:49:12

Отображение табличных данных с головкой таблицы слева, а не сверху

ответ

Смежные вопросы