使用CSS在同一行上设置两个表

时间：2018-04-12 14:43:51

标签： html css

由于我不熟悉CSS，我想问最好的解决方案来应用表的格式，就好像两个不同的表并列：

enter image description here

为了做到这一点，我会为每个td或th做一个class属性，以便棕色的是褐色而其余的是蓝色。

以下是我所做的，但是我无法正确设置边框宽度，我希望在CSS中提供一些帮助：

html {overflow: auto;}

div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
body{width:99%;}
table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	white-space: nowrap;
}
table * {
  border: 1px solid black;
}
table thead * {
  background-color: rgb(242, 242, 242);
}
.titlePrev {
	background-color: rgb(183, 222, 232);
}
.titlegeneriquedpt {
	background-color: rgb(196, 189, 151);
}
table tbody * {
	background-color: rgb(218, 238, 243);
}
.generiquedpt {
	background-color: rgb(238, 236, 225);
}

th:first-child, td:first-child {
  border-left: 2px;
}
<table><thead>
	<tr>
		<th colspan=14 class="titlePrev">TEXT</th>
		<th colspan=13 class="titlegeneriquedpt">TEXT</th>
	</tr><tr>
		<th colspan=3>TEXT</th>
		<th rowspan=3>TEXT</th>
		<th colspan=8>TEXT</th>
		<th colspan=2 rowspan=2>TEXT</th>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=3 rowspan=2>TEXT</td>
		<th colspan=2 rowspan=2>TEXT</th>
	</tr><tr>
		<td rowspan=2>TEXT</td>
		<td rowspan=2>TEXT</td>
		<td rowspan=2>TEXT</td>
		<td colspan=3>TEXT</td>
		<td colspan=4>TEXT</td>
		<td rowspan=2>TEXT</td>
	</tr><tr>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td colspan=2>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<th>TEXT</th>
		<th>TEXT</th>
	</tr></thead>	
	<tbody><tr>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td class="generiquedpt" colspan=2>TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
	</tr><tr>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td class="generiquedpt" colspan=2>TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
	</tr><tr>
	</tr></tbody>
	<tfoot><tr>
		<th class="titlePrev" colspan=3>TEXT</th>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlegeneriquedpt" colspan=2>TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td> 		
	</tr></tfoot>	
</table>

不要担心我设置的colspan，因为我将在该页面的下表中需要它。

1 个答案:

答案 0 :(得分：0)

我想出了一个解决方案。但是我不知道它是否有效。在这里：

html {overflow: auto;}

div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
body{width:99%;}
table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	white-space: nowrap;
}
table * {
  border: 1px solid black;
}
table thead * {
  background-color: rgb(242, 242, 242);
}
.titlePrev {
	background-color: rgb(183, 222, 232);
}
.titlegeneriquedpt {
	background-color: rgb(196, 189, 151);
}
table tbody * {
	background-color: rgb(218, 238, 243);
}
.generiquedpt {
	background-color: rgb(238, 236, 225);
}

th:first-child, td:first-child {
  border-left: 2px;
}

.bl{
  border-left-style: solid;
  border-left-width: medium;
}
.br{
  border-right-style: solid;
  border-right-width: medium;
}
.bt{
  border-top-style: solid;
  border-top-width: medium;
}
.bb{
  border-bottom-style: solid;
  border-bottom-width: medium;
}
<table><thead>
	<tr class="bl br bt">
		<th colspan=14 class="titlePrev br">A</th>
		<th colspan=13 class="titlegeneriquedpt">B</th>
	</tr><tr class="bl br">
		<th colspan=3>TEXT</th>
		<th rowspan=3>TEXT</th>
		<th colspan=8 >TEXT</th>
		<th colspan=2 rowspan=2 class="br">TEXT</th>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=2 rowspan=2>TEXT</td>
		<td colspan=3 rowspan=2>TEXT</td>
		<th colspan=2 rowspan=2 >TEXT</th>
	</tr><tr class="bl br">
		<td rowspan=2>TEXT</td>
		<td rowspan=2>TEXT</td>
		<td rowspan=2>TEXT</td>
		<td colspan=3>TEXT</td>
		<td colspan=4>TEXT</td>
		<td rowspan=2>TEXT</td>
	</tr><tr class="bl br">
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td class="br">TEXT</td>
		<td colspan=2>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<th>TEXT</th>
		<th>TEXT</th>
	</tr></thead>	
	<tbody><tr class="bl br">
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td class="br">TEXT</td>
		<td class="generiquedpt" colspan=2>TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
	</tr><tr class="bl br">
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td>TEXT</td>
		<td class="br">TEXT</td>
		<td class="generiquedpt" colspan=2>TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt">TEXT</td>
		<td class="generiquedpt ">TEXT</td>
	</tr><tr class="bl br">
	</tr></tbody>
	<tfoot><tr class="bl br bb">
		<th class="titlePrev" colspan=3>TEXT</th>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev">TEXT</td>
		<td class="titlePrev br">TEXT</td>
		<td class="titlegeneriquedpt" colspan=2>TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td>
		<td class="titlegeneriquedpt">TEXT</td> 		
	</tr></tfoot>	
</table>

您只需根据边框的位置添加4个类。希望它有所帮助。

相关问题
最新问题