如何使用 UL 和 li 构建类似表的结构
[英]How to build a table like structure using UL and li
问题描述
I want to create a table like structure like the one below
我想创建一个类似下面的结构的表
label1 label2 label3
abc 123 tomo
using UL and LI Html elements.I Don't want to use HTML tables because there is a button which says add new line which adds a new line at runtime.使用 UL 和 LI Html 元素。我不想使用 HTML 表，因为有一个按钮显示添加新行，它在运行时添加新行。 Also I will make the whole list to be rearrangeable buy providing a rearrangeable button.此外，我会将整个列表设置为可重新排列的购买，提供可重新排列的按钮。
4 个解决方案
解决方案1
2 2013-09-09 21:00:37
HTML HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-table">
<ul class="d-column">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</body>
</html>
CSS CSS
.d-table {
min-width: 300px;
min-height: 300px;
background: lightgrey;
display: block;
width: 1px solid red;
}
.d-table ul {
list-style-type: none;
}
.d-column li {
padding: 0px;
display: inline-block;
border: 1px solid blue;
background: grey;
width: 50px;
height: 20px;
}
.d-row li {
padding: 0px;
display: inline-block;
background: lightgrey;
border: 1px solid red;
width: 50px;
height: 20px;
}
In JavaScript you can have a for loop to add more rows.在 JavaScript 中，您可以使用 for 循环来添加更多行。 This is just the HTML and CSS.这只是 HTML 和 CSS。
解决方案2
1 2011-07-15 13:47:51
Google for grids without tables.谷歌没有表格的网格。
The idea is to use css styles to layout containers/controls in grid structure.这个想法是使用 css styles 在网格结构中布局容器/控件。
some links:一些链接：
http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml
http://www.alistapart.com/articles/practicalcss/ http://www.alistapart.com/articles/practicalcss/
http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx
解决方案3
1 2011-07-15 13:49:16
you should use table in order to create tables:)您应该使用表来创建表:)
HEre you have a function to add rows to the table这里你有一个 function 来向表中添加行
/*
Add a new table row to the bottom of the table
*/
function addTableRow(jQtable){
jQtable.each(function(){
var $table = $(this);
// Number of td's in the last table row
var n = $('tr:last td', this).length;
var tds = '<tr>';
for(var i = 0; i < n; i++){
tds += '<td> </td>';
}
tds += '</tr>';
if($('tbody', this).length > 0){
$('tbody', this).append(tds);
}else {
$(this).append(tds);
}
});
}
you could see it here: http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/你可以在这里看到它： http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/
解决方案4
0 已采纳 2011-07-15 13:47:30
You can float each ul to the left, float:left您可以将每个ul浮动到左侧， float:left
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.