Html 如何使用 div 标签创建表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8110405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a table using div tags?
提问by expert
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
这个问题实际上来自我对 GWT 框架的实验，但我决定简化这个问题。
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
我正在尝试用 div 替换 table 标记。如何水平对齐包含两个垂直对齐的 DIV 标签的两个 DIV 标签？
Here is what I have:
这是我所拥有的：
<!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>
It's rendered in my Chrome 15.0.874.106 m as:
它在我的 Chrome 15.0.874.106 m 中呈现为：
Name:
Address:
test1
test2
where I expected it to be:
我期望它是：
Name: test1
Address: test2
Could you please help me ?
请你帮助我好吗 ？
回答by Homer6
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
HTML 表格适用于表示表格数据。只是不要将表格用于一般布局。尽管如此，表格仍然更适合表格数据。
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
更新：展望未来，您可能需要查阅 CSS3 网格布局规范：http: //www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
但是，如果你出于某种原因真的想让它工作，我会将所有列设置为固定宽度，在第一列上向左浮动并清除。如果你想为不同的列设置不同的宽度，你可以为这些列创建特定的类并设置特定的宽度。但是，如果你的表中有用户数据，你必须确保overflow:hidden 是打开的，否则它会破坏你的表。
I've pasted the code in here, but I've also created a jsfiddle link.
我在这里粘贴了代码，但我也创建了一个jsfiddle link。
Here's the html:
这是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>
And the styles:
和样式：
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
但是，当表格中的文本发生变化时，您会遇到问题。它不会像一张桌子。例如，当单元格的文本换行到下一行时，它不会像您期望的单元格那样调整该行中所有单元格的高度。因此溢出：隐藏或仅使用 HTML 表。
Hope that helps...
希望有帮助...
回答by neurotik
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
但是，我认为对于示例，您有一个实际的表会更合适；你也可以做这样的事情：
<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>回答by Moe Sweet
<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>
回答by COBOLdinosaur
CSS3 has just the ticket:
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>That can then be allied to a structure that looks like a table In this case I've included a nested table:
然后可以将其与看起来像表的结构相关联在这种情况下，我包含了一个嵌套表：
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
如果您愿意，您可以省略外部包装器，不像真正的表格，行和单元格似乎不需要它。不幸的是，这只适用于支持 CSS3 的现代浏览器，而忽略了包括 IE9 在内的 IE。
回答by Muder Surti
your solution is as follow :- PLease check it
您的解决方案如下：- 请检查一下
<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>回答by Pavan Kondapuram
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
如果您想生成动态表格结构，请尝试使用 jqGrid ( demo)
Or if your purpose is different and still wanna go with div? Try this..
或者，如果您的目的不同并且仍然想要使用 div？尝试这个..
use float:left;instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
使用float:left;代替display:inline。Float 将 div 缩小到其内容大小，为其他元素留出空间。这使得其他元素可以容纳在浮动元素旁边。
Corrected code:
更正的代码：
<!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>
回答by Mahyar Kakaee
Moe's way is pretty cool but it's not standard. This is the best way.
Moe 的方式很酷，但它不是标准的。这是最好的方法。
Use CSS command "float" just like this:
像这样使用 CSS 命令“float”：
HTML Code:
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>
Or you can have it all in one place:
或者，您可以将所有内容集中在一处：
<!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>