我必须创建一个带有引导程序的响应表,但是它太宽了,所以我希望将td彼此堆叠,但在表中只能显示全宽度,仅在移动设备上。我想在移动视图上将TD堆叠在一起。但随后它们也需要足够宽以容纳桌子。因此表格中的宽度为100%。但我似乎无法使其正常工作。这是我的HTML代码:
<table class="table table-responsive w-100 d-block d-md-table">
<thead class="thead-light">
<tr>
<th>Bedrijfsgegevens</th>
<th></th>
</tr>
</thead>
<tbody style="width:100%">
<tr>
<td style="font-weight:bold;">Bedrijfsnaam</td>
<td>~naam_zaak~</td>
</tr>
<tr>
<td style="font-weight:bold;">Straat</td>
<td>~zaak_straat~</td>
</tr>
<tr>
<td style="font-weight:bold;">Huisnummer</td>
<td>~zaak_huisnummer~</td>
</tr>
<tr>
<td style="font-weight:bold;">Huisnummer toevoeging</td>
<td>~zaak_huisnummer_toevoeging~</td>
</tr>
<tr>
<td style="font-weight:bold;">Postcode</td>
<td>~zaak_postcode~</td>
</tr>
<tr>
<td style="font-weight:bold;">Woonplaats</td>
<td>~zaak_woonplaats~</td>
</tr>
<tr>
<td style="font-weight:bold;">Land</td>
<td>~zaak_land~</td>
</tr>
<tr>
<td style="font-weight:bold;">Telefoonnummer</td>
<td>~zaak_telefoon~</td>
</tr>
<thead class="thead-light">
<tr>
<th>Correspondentiegegevens</th>
<th></th>
</tr>
</thead>
<tr>
<td style="font-weight:bold;">Straat</td>
<td><input type="text" class="form-control" value="~Folder_straat~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Huisnummer</td>
<td><input type="text" class="form-control" value="~folder_huisnummer~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Huisnummer toevoeging</td>
<td><input type="text" class="form-control" value="~folder_huisnummer_toevoeging~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Postcode</td>
<td><input type="text" class="form-control" value="~folder_postcode~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Woonplaats</td>
<td><input type="text" class="form-control" value="~folder_woonplaats~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Land</td>
<td><input type="text" class="form-control" value="~folder_land~"></td>
</tr>
<thead class="thead-light">
<tr>
<th>1e inkoper</th>
<th></th>
</tr>
</thead>
<tr>
<td style="font-weight:bold;">Naam en voorletters</td>
<td><input type="text" class="form-control" value="~1e_inkoper_naam~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Geslacht</td>
<td><input type="text" class="form-control" value="~1e_inkoper_geslacht~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Mobielnummer</td>
<td><input type="text" class="form-control" value="~zaak_mobiel~"></td>
</tr>
<tr>
<td style="font-weight:bold;">E-mailadres</td>
<td><input type="text" class="form-control" value="~zaak_emailadres~"></td>
</tr>
<thead class="thead-light">
<tr>
<th style="font-weight:bold;">2e inkoper</th>
<th></th>
</tr>
</thead>
<tr>
<td style="font-weight:bold;">Naam en voorletters</td>
<td><input type="text" class="form-control" value="~2e_inkoper_naam~"></td>
</tr>
<tr>
<td style="font-weight:bold;">Geslacht</td>
<td><input type="text" class="form-control" value="~2e_inkoper_geslacht~"></td>
</tr>
<tr style="color:red;">
<td style="font-weight:bold;">Mobielnummer</td>
<td><input type="text" class="form-control" value="~zaak_mobiel~"></td>
</tr>
<tr style="color:red;">
<td style="font-weight:bold;">E-mailadres</td>
<td><input type="text" class="form-control" value="~zaak_emailadres~"></td>
</tr>
<thead class="thead-light">
<tr>
<th>Bedrijfsactiviteit</th>
<th></th>
</tr>
</thead>
<tr>
<td>Deze informatie helpt ons om<br> gerichter acties en actualiteiten<br> naar je te communiceren.</td>
<td>
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
</td>
</tr>
</tbody>
</table>