Bootstrap 4表太大,无法移动

时间:2019-03-07 11:50:34

标签: html css bootstrap-4

我必须创建一个带有引导程序的响应表,但是它太宽了,所以我希望将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>

0 个答案:

没有答案