Как создать перечислимую табличную среду в HTML/CSS?

мне нужно, чтобы отобразить некоторые данные в HTML-страницы в три колонки, таблицы, перечисленной среде, как это:Как создать перечислимую табличную среду в HTML/CSS?

1. elephant   animal    a large animal that 
              eats leaves 
2. fish    animal    an animal that 
              swims in the ocean 
3. cactus    plant    a plant that lives 
              in dry places

Нет горизонтальные или вертикальные правила не нужны.
Каждая часть данных находится в выровненном слева «поле», поэтому, если любой текст необходимо обернуть, он все еще остается в его столбце.

Есть ли чистое решение HTML или CSS для представления перечисленных табличных окружений?

источник

2014-09-09 Village

Является ли ваши данные в таблице (или) с помощью «окна» вы имеете в виду «div»? Если он находится в таблице, вы можете посмотреть на этот [пример] (http://jsfiddle.net/dfmb1d94/). Он использует счетчики CSS для автоматического генерации чисел и фактически поддерживается в более низких IE-версиях. – Harry

Я просто имею в виду «поле», как внутри, текст связан внутри невидимого прямоугольника. Когда текст из одного столбца обертывается на следующую строку, он не перетекает в другие столбцы. В настоящее время HTML не содержит ни одного из данных, поэтому любой формат в порядке. – Village

Вы можете использовать функциональные возможности CSS счетчик для автоматической генерации чисел, как показано в примере ниже:

table{ 
    counter-reset: rows; /* initalize the counter variable */ 
} 
tr{ 
    counter-increment: rows; /* increment the counter every time a tr is encountered */ 
} 
td{ /* just for demo */ 
    vertical-align: top; 
    width: 100px; 
} 
td:first-child:before{ /* add the counter value before the first td in every row */ 
    content: counter(rows) ". "; 
}

Fiddle Demo

Примечание:

По Can I Use, CSS-счетчики поддерживаются и более низкими версиями IE.
Если данные действительно являются табличными данными, как вы упомянули, нет ничего плохого в использовании самих элементов table.
Мы делаем counter-reset всякий раз, когда встречается тег table, чтобы каждая строка в новой таблице всегда начиналась с 1. Если нумерация должна продолжаться в данных в другой таблице, мы можем сбросить счетчик на общий уровень родительского уровня (или если он не равен body).
Протестировано в IE (v8 до v10), Firefox, Opera и Chrome и работает точно так же во всех них. JS Fiddle не открывается должным образом в более низких версиях IE, поэтому вы можете использовать этот образец JS Bin для демонстрации.

источник

2014-09-09 07:27:02 Harry

Я не понял решения, используя '

', '' и '

', может выглядеть так чисто. – Village

И я только что пробовал в IE до версии v7 и удивительно, он работает так же хорошо :) Вы можете использовать этот [JS Bin] (http://jsbin.com/xikanogopeli/2/edit) для тестирования в более низких версиях IE поскольку JSFiddle, похоже, не открывается должным образом в них. – Harry

Извините за ошибку typo в приведенном выше комментарии, я на самом деле имел в виду до IE v8, а не IE v7. – Harry

Вы можете сделать это с помощью CSS:

table { 
counter-reset: rowNumber; 
} 

table tr { 
counter-increment: rowNumber; 
} 

table tr td:first-child::before { 
content: counter(rowNumber); 
min-width: 1em; 
margin-right: 0.5em; 
}

Demo fiddle

Но я бы предложил JS:

var table = document.getElementsByTagName('table')[0], 
rows = table.getElementsByTagName('tr'), 
text = 'textContent' in document ? 'textContent' : 'innerText'; 
console.log(text); 

for (var i = 0, len = rows.length; i < len; i++){ 
    rows[i].children[0][text] = i + ': ' + rows[i].children[0][text]; 
}

Demo fiddle

источник

2014-09-09 07:57:54 dan

Как создать перечислимую табличную среду в HTML/CSS?

ответ

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