имитация таблицы

html · November 22, 2009

возникла необходимость полной имитации свойств таблицы посредством списка. возможно ли? возникла задача отобразить списки по горизонтали так, чтобы элементы списка (li) в зависимости от их содержимого полностью заполняли ширину контейнера (ul).

psywalker · November 22, 2009

Как пример, но траблы в ИЕ

<body>
<ul id=»menu»>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>Products</a></li>
<li><a href=»#»>About</a></li>
</ul>
<div id=»content»>
<p>Fusce quis velit…</p>
</div>
<div id=»aSide»>
<p>Praesent iaculis commodo elit…</p>
</div>
</body>

body { display: table; table-layout: fixed;}
#menu, #content, #aSide { display: table-cell; }
#menu { width: 20%; border: 2px solid red;}
#content { width: 50%; border: 2px solid blue; }
#aSide { width: 29%; border: 2px solid green;}

html · November 22, 2009

не понял. как-то вот так, но без центрирования относительно контейнера ul, то есть чтобы li (по горизонтали, обтекая друг друга) занимали всю ширину ul.

  #menu {text-align:center;}
  #menu div {display: table;margin: 0 auto;}
  #menu ul {list-style:none;} 
  #menu li {display:inline;}
<div id="menu">
        <div>
          <ul>
           <li><a href="#">Главная</li>
           <li><a href="#">Новости</li>
           <li><a href="#">Контакты</li>
          </ul>
        </div>          
</div>

Edited November 22, 2009 by html

psywalker · November 22, 2009

не понял. как-то вот так, но без центрирования относительно контейнера ul, то есть чтобы li (по горизонтали, обтекая друг друга) занимали всю ширину ul.
  #menu {text-align:center;}
  #menu div {display: table;margin: 0 auto;}
  #menu ul {list-style:none;} 
  #menu li {display:inline;}
<div id="menu">
        <div>
          <ul>
           <li><a href="#">Главная</li>
           <li><a href="#">Новости</li>
           <li><a href="#">Контакты</li>
          </ul>
        </div>          
</div>

1) Давай скрин того, что должно получится

2) А тебе надо чтобы ячейки были по 33%, и каждая занимала одну треть экрана?

html · November 22, 2009

1) Давай скрин того, что должно получится

сгруппируются и отцентрируются по горинзонтали относительно ul.

2) А тебе надо чтобы ячейки были по 33%, и каждая занимала одну треть экрана?

именно! и без задания ширины, чтобы изменялась в зависимости от контента.

psywalker · November 22, 2009

Так не пойдёт:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* { margin: 0; padding: 0; }

	ul.icons { position: relative; left: 50%; float: left;}
		ul.icons li { position: relative; left: -50%; float: left;}
			ul.icons li a { float: left; width: 20px; height: 20px; margin: 0 10px; border: 1px solid red;}
</style>




</head>

<body>

	<ul class="icons">
		<li><a href="" alt="">1</a></li>
		<li><a href="" alt="">2</a></li>
		<li><a href="" alt="">3</a></li>
		<li><a href="" alt="">4</a></li>
	</ul>


</body>
</html>

html · November 22, 2009

Так не пойдёт:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* { margin: 0; padding: 0; }

	ul.icons { position: relative; left: 50%; float: left;}
		ul.icons li { position: relative; left: -50%; float: left;}
			ul.icons li a { float: left; width: 20px; height: 20px; margin: 0 10px; border: 1px solid red;}
</style>




</head>

<body>

	<ul class="icons">
		<li><a href="" alt="">1</a></li>
		<li><a href="" alt="">2</a></li>
		<li><a href="" alt="">3</a></li>
		<li><a href="" alt="">4</a></li>
	</ul>


</body>
</html>

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

ul{width:100%;}

ul li{float:left; width:25%;}

для четырёх элементов, но без задания ширины li

psywalker · November 22, 2009

спасибо за время. но код сумбурный. контейнер ul смещается налево и границы li облегают контент как строчный элемент, что неподходит. li должны себя вести так же, как и
ul{width:100%;}
ul li{float:left; width:25%;}
для четырёх элементов, но без задания ширины li

Значит только таблицы или чёткое количество элементов и таже ширины в %

rash · November 22, 2009

Если надо чтобы список вел себя как строка таблицы, то правильный способ сделать это:

ul {
	display: table;
	table-layout: fixed;
}
li {
	display: table-cell;
}

А надёжный и кроссбраузеный способ — таблица.

html · November 22, 2009

спасибо, ребят.

psywalker · November 22, 2009

спасибо, ребят.

Не за что

Sign In

имитация таблицы

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information