表中的3列中的多個組合行

我想創建一個包含3列內多行的表。這是很難爲我解釋，所以有一個例子：表中的3列中的多個組合行

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

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

1號是正確的，數據顯示在正確的道路。但是當描述時間更長時，就會出現問題。我怎樣才能達到像更大的數據沒有1？我不想創建一個 td，並且在其內部的另一個表，因爲爲每列啓用了篩選。
在我的項目，我用數據表捆綁和Bootstrap 3

UPDATE：數據格式應該爲例子，表顯示了類似事件，一個事件，應該有一些（我不知道多少）派對，音樂會等

來源

2017-04-23 ptyskju

我認爲你需要使用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>

來源

2017-04-23 10:22:31 Ace

看看更新的問題。當日期和描述數量不變時，您的方法很好。但是很難通過使用DataTable進行過濾。 – ptyskju

@ptyskju。請使用DataTables嘗試以上代碼。因爲我認爲它會起作用。 – Ace

表中的3列中的多個組合行

回答

相關問題