我想创建一个包含 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>No 1 是正确的，数据以正确的方式显示。但是有一个问题，当描述较长时。我怎样才能用更大的数据实现类似 no 1 的目标？我不想创建一个 td 并在其中创建另一个 table，因为为每一列启用了过滤。
在我的元素中，我使用 DataTables Bundle 和 Bootstrap 3。
更新: 数据的格式应类似于示例，表格显示类似事件的内容，对于一个事件应该有一些(我不知道有多少)派对、音乐会等。
最佳答案
我认为您需要使用 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>
关于html - 表内 3 列中的多个组合行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43569612/