Как создать таблицу, используя теги div?

ProgramBox

Как создать таблицу, используя теги div?

Post author:admin
Запись опубликована:14 мая, 2023
Post category:Вопросы по программированию

#html #css #css-tables

#HTML #css #css-таблицы

Вопрос:

На самом деле этот вопрос возник в результате моих экспериментов с GWT framework, но я решил упростить вопрос.

Я пытаюсь заменить тег table на divs. Как я могу выровнять по горизонтали два тега DIV, которые содержат два вертикально выровненных тега DIV?

Вот что у меня есть:

 <!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

Она отображается в моем Chrome 15.0.874.106 m как:

 Name:
Address:
test1
test2

там, где я ожидал, что это будет:

 Name:    test1
Address: test2

Не могли бы вы, пожалуйста, мне помочь?

Ответ №1:

HTML-таблицы подходят для представления табличных данных. Просто не используйте таблицы для общего макета. Хотя таблицы все еще лучше подходят для табличных данных.

ОБНОВЛЕНИЕ: В дальнейшем вы можете захотеть ознакомиться со спецификацией макета CSS3 Grid:http://www.w3.org/TR/css3-grid-layout

Но как есть, если вы действительно хотите, чтобы это работало по какой-либо причине, я бы установил для всех столбцов фиксированную ширину, плавающий влево и очистить первый столбец. Если вам нужна разная ширина для разных столбцов, вы можете создать специальные классы для этих столбцов и задать определенную ширину. Но, если в вашей таблице есть пользовательские данные, вы должны убедиться, что включен параметр overflow: hidden, иначе это нарушит работу вашей таблицы.

Я вставил сюда код, но я также создал ссылку jsfiddle.

Вот html:

 <div class="table">

    <div class="column first">Name:</div>
    <div class="column">test1</div>

    <div class="column first">Address:</div>
    <div class="column">test2</div>

</div>

И стили:

 .table .column{
   width: 100px;
   float: left;
}

.table .column.first{
   clear: left;   
}

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

Надеюсь, это поможет…

1. Обновлено, чтобы предоставить альтернативу.

2. На самом деле, мой тоже не работает в IE7… ну что ж… Я думаю, что надежными являются только таблицы.

3. Обновление: добавлена ссылка на спецификацию макета CSS3 Grid

4. Обновление: в этом руководстве подробно рассказывается о создании табличного отображения с использованием встроенного блока. blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block

Ответ №2:

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

 <body>
	<div style="display: table;">
		<div style="display: table-row;">
			<div style="display: table-cell;">Name:</div>
			<div style="display: table-cell;">test1</div>
		</div>
		<div style="display: table-row;">
			<div style="display: table-cell;">Address:</div>
			<div style="display: table-cell;">test2</div>
		</div>
	</div>
</body>

Ответ №3:

В CSS3 есть только тикет:

 .tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}

     <div class="tabl">
	<div class="row">
		<div class="cell"> CELL one</div>
		<div class="cell"> CELL two</div>
		<div class="cell"> CELL three</div></div>
	<div class="row">
		<div class="cell"> CELL four
		</div><div class="cell"> CELL five</div>
		<div class="cell"> 
			<div class="tabl">
				<div class="row">
					<div class="cell">CELL 6A</div>
					<div class="cell">CELL6B</div>
				</div>
			</div>
		</div>
	</div>
</div>

Затем это может быть объединено со структурой, которая выглядит как таблица, В данном случае я включил вложенную таблицу:

Если вы хотите, вы, вероятно, можете не использовать внешнюю оболочку, в отличие от реальной таблицы, строки и ячейки, похоже, в ней не нуждаются. К сожалению, это работает только в современных браузерах, поддерживающих CSS3, который исключает IE, включая IE9.

Ответ №4:

     <div style="display: block; ">
        <div style="float:left">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >Address:</div>
        </div>
        <div style="float:left">
            <div class="gwt-Label" >test1</div>
            <div class="gwt-Label" >test2</div>
        </div>
<div style="clear:both"></div>
    </div>

Ответ №5:

ваше решение заключается в следующем: — Пожалуйста, проверьте это

  <style type="text/css">
    	.Table
    	{
    		display: table;
    	}
    	.Row
    	{
    		display: table-row;
    	}
    	.Cell
    	{
    		display: table-cell;
    	}
    </style>

  <!doctypehtml>
    <html>
    <body>
    <div class="Row">
    	<div class="Cell">
    		<p>Name:</p>
    	</div>
    	<div class="Cell">
    		<p>Test1</p>
    	</div>
    </div>
    <div class="Row">
    	<div class="Cell">
    		<p>Address:</p>
    	</div>
    	<div class="Cell">
    		<p>Test2</p>
    	</div>
    </div>
    </body>
    </html>

Ответ №6:

Если вы хотите создать динамическую табличную структуру, попробуйте использовать jqGrid (демо)

Или, если ваша цель другая и вы все еще хотите использовать div? Попробуйте это..

используйте float:left; вместо display:inline . Float уменьшает div до размера содержимого, освобождая место для других элементов. Это позволяет разместить другие элементы рядом с плавающим элементом.

Исправленный код:

 <!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="float:left; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="float:left;">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

Ответ №7:

Способ Moe довольно классный, но он не стандартный. Это лучший способ.

Используйте CSS-команду «float» точно так же, как это:

HTML-код:

   .gwt-Label
    {
        float: left;
        width: 50%
        }

 <!doctype html>
    <html>
    <head>
        <link href="Style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div style="display: block; ">
        <div style="display: inline; ">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >test1</div>
        </div>
        <div style="display: inline; ">
            <div class="gwt-Label" >Address:</div>
            <div class="gwt-Label" >test2</div>
        </div>
    </div>
    </body>
    </html>

Или вы можете разместить все это в одном месте:

 <!doctype html>
    <html>
    <head>
    
        <style type="text/css">
            .gwt-Label{
            float: left;
            width: 50%
            }
        </style>
    
    </head>
    <body>
    <div style="display: block; ">
        <div style="display: inline; ">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >test1</div>
        </div>
        <div style="display: inline; ">
            <div class="gwt-Label" >Address:</div>
            <div class="gwt-Label" >test2</div>
        </div>
    </div>
    </body>
    </html>