Question

我想在3列内创建一个包含多行的表。我很难解释，所以有一个例子：

＆＃13;

.min-table{
  width: 300px
}
td p:last-child {
    border-bottom: none;
    margin-bottom: 0px;
}
td p {
    min-height: 19px;
    border-bottom: 1px solid #ddd;
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="min-table">

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>
          No
        </th>
        <th>
          Name
        </th>
        <th>
          Date
        </th>
        <th>
          Description
        </th>
        <th>
          Notes
        </th>
        <th>
          Ticket price
        </th>
        <th>
          Tickets left
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          Big breakfast
        </td>
        <td>
          <p>
            03.01.16
          </p>
          <p>
            05.03.16
          </p>
          <p>
            07.04.16
          </p>
          <p>
            01.06.16
          </p>
        </td>
        <td>
          <p>
            Description
          </p>
          <p>
            Description
          </p>
          <p>
            Description
          </p>
          <p>
            Desc
          </p>
        </td>
        <td>
          <p>
          </p>
          <p>
          </p>
          <p>
            01/02/04
          </p>
          <p>
            03/06/06
          </p>
        </td>
        <td>
          $12
        </td>
        <td>
          3500
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          Another event
        </td>
        <td>
          <p>
            03.02.17
          </p>
          <p>
            04.02.17
          </p>
          <p>
            05.02.17
          </p>
          <p>
            06.02.17
          </p>
          <p>
            07.02.17
          </p>
          <p>
            08.02.17
          </p>
          <p>
            09.02.17
          </p>
          <p>
            10.02.17
          </p>
        </td>
        <td>
          <p>
            Description
          </p>
          <p>
            Very very long description
          </p>
          <p>
          </p>
          <p>
            Desc
          </p>
          <p>
            Description
          </p>
          <p>
            Very very long description
          </p>
          <p>
          </p>
          <p>
            Desc
          </p>
        </td>
        <td>
          <p>
          </p>
          <p>
          </p>
          <p>
            01/02/04
          </p>
          <p>
            03/06/06
          </p>
          <p>
          </p>
          <p>
          </p>
          <p>
            01/02/04
          </p>
          <p>
            03/06/06
          </p>
        </td>
        <td>
          $30
        </td>
        <td>
          25
        </td>
      </tr>
    </tbody>
  </table>

</div>

＆＃13;

否1是正确的，数据以正确的方式显示。但是当描述更长时，就会出现问题。如何通过更大的数据实现第1项？我不想创建一个 td 并在其中创建另一个表，因为为每列启用了过滤功能。
在我的项目中，我正在使用DataTables Bundle和Bootstrap 3。

更新：数据应该像示例一样格式化，表格显示类似事件，对于一个事件应该有一些（我不知道多少）派对，音乐会等。

Answer 1

我认为您需要使用colspan和rowspan来解决您的问题。我希望这会对你有所帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table style="width:100%" border="1">
      <tr>
        <th rowspan="2">No</th>
        <th rowspan="2">Name</th> 
        <th colspan="4">Date</th>
        <th rowspan="2">Description</th>
        <th colspan="2">Code</th>
        <th rowspan="2">Gender</th>
        <th rowspan="2">Country</th>
      </tr>
      <tr>
        <th>Date 1</th>
        <th>Date 2</th>
        <th>Date 3</th>
        <th>Date 4</th>
        <th>Code 1</th>
        <th>Code 2</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Jill Smith</td>
        <td>03.01.16</td>  
        <td>05.07.12</td>
        <td>07.04.07</td>
        <td>01.06.12</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        <td>ATU985NF97H</td>
        <td>ACE7908HKN1</td>
        <td>Male</td>
        <td>Philippines</td>
      </tr>
    </table>
</body>
</html>

表格内3列中的多个组合行

1 个答案: