Question

我想创建一个类似下面结构的表格

label1       label2          label3
  abc          123             tomo

使用UL和LI Html元素。我不想使用HTML表格，因为有一个按钮表示添加新行，在运行时添加新行。此外，我将整个列表重新排列购买，提供可重新排列的按钮。

Answer 1

谷歌没有桌子的网格。

我们的想法是使用css样式来布局网格结构中的容器/控件。

一些链接：

http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml

http://www.alistapart.com/articles/practicalcss/

http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx

Answer 2

你应该使用table来创建表：）

你有一个向表添加行的功能

/*
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);
        }
    });
}

你可以在这里看到它：http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/

Answer 3

<强> 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

.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;
}

在JavaScript中，您可以使用for循环添加更多行。这只是HTML和CSS。

Answer 4

您可以将每个ul浮动到左侧，float:left

如何使用UL和li构建类似结构的表

4 个答案: