Bootstrap 4 столик слишком широкий для мобильного

Question

Мне нужно создать адаптивную таблицу с начальной загрузкой, но она была слишком широкой, поэтому я хочу, чтобы тэды были сложены друг на друга, но при этом на всю ширину таблицы только на мобильных устройствах.Я хочу, чтобы мои ТД были расположены друг над другом на мобильном устройстве.но тогда они также должны быть достаточно широкими для стола.так 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>