我有一个带有嵌套表的表。我想将每列与嵌套列对齐，因此它看起来宽度相同，两者都是响应表。
我无法绕过具有独立ID的两张桌子的大小，但作为参考，我将11:00放在2个单元格中，它们基本上应该在显示中对齐。
我尝试通过CSS控制它，它应该是这样的。
我下面有一个片段，其中包括bootstrap 4 css。
/* Below is the Schedule Part for the Reservation Manager */
#reservationManagerScrolltbody {
height: 10em;
/* Just for the demo */
overflow-y: auto;
/* Trigger vertical scroll */
overflow-x: auto;
/* Trigger horizontal scroll */
width: 100px;
}
#table2 td+td {
border-left: 2px solid #F5F5F5;
}
#table2 th+th,
th,
td {
border-left: 2px solid #F5F5F5;
font-size: 0.75vw;
width: 50px;
}
#waiterStationTableinfo td+td,
th {
border-left: 1px solid #F5F5F5;
}
.wstinfo {
width: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- right container -->
<div id="right">
<h6 style="font-size:1vw; ">Search by any table</h6>
<input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="text" id="reservationManagerListTableNumberInput" placeholder="Search for any table.. ">
<table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2">
<thead class="header">
<tr>
<!-- if checkbox is checked, clone reservation subjects to the whole table row -->
<th class="wstinfo">
<input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
<input id="report" type="checkbox" title="Show Assignment report" />
</th>
<th class="wstinfo">1</th>
<th class="wstinfo">1</th>
<th class="wstinfo">1</th>
<th class="redips-mark dark">11:00</th>
<th class="redips-mark dark">11:30</th>
<th class="redips-mark dark">12:00</th>
<th class="redips-mark dark">12:30</th>
<th class="redips-mark dark">13:00</th>
<th class="redips-mark dark">13:30</th>
<th class="redips-mark dark">14:00</th>
<th class="redips-mark dark">14:30</th>
<th class="redips-mark dark">17:00</th>
<th class="redips-mark dark">17:30</th>
<th class="redips-mark dark">18:00</th>
<th class="redips-mark dark">18:30</th>
<th class="redips-mark dark">19:00</th>
<th class="redips-mark dark">19:30</th>
<th class="redips-mark dark">20:00</th>
<th class="redips-mark dark">20:30</th>
<th class="redips-mark dark">21:00</th>
<th class="redips-mark dark">21:30</th>
<th class="redips-mark dark">22:00</th>
</tr>
</thead>
<tbody class="reservationManagerScrolltbody">
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-sm waiterStationTableinfo">
<thead class="header">
<tr>
<th class="wstinfo">TN</th>
<th class="wstinfo">TT</th>
<th class="wstinfo">RA</th>
<th class="wstinfo">GA</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td>11:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>22:00</td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>4 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-sm waiterStationTableinfo">
<thead class="header">
<tr>
<th class="wstinfo">TN</th>
<th class="wstinfo">TT</th>
<th class="wstinfo">RA</th>
<th class="wstinfo">GA</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>154</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- right container -->