Отзывчивый столик внутри карточки

Question

Я создал карту, используя bootstrap. Внутри этой карты я собираюсь вставить таблицу с данными.

Моя проблема в том, что при уменьшении экрана (проверьте отзывчивость) данные в таблице выходят из карты.

Как можно Я решаю эту проблему самостоятельно, кто-то может мне помочь?

Спасибо

DEMO

. HTML

<div style="width:40%">
    <div class="card">
        <div class="card-header header">
            <h1>My Table</h1>
        </div>
        <table class="card-table table-borderless myTable" style="overflow-y: auto; overflow-x: auto;">
            <thead>
                <tr>
                    <th scope="col tableTitles">Title</th>
                    <th scope="col tableTitles">Name</th>
                    <th scope="col tableTitles">ID</th>
                    <th scope="col tableTitles">Street</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let pr of Data; let  a = index;" class="tableColor">

                    <td class="tableTitles">
                        {{pr.title}}
                    </td>
                    <td class="tableTitles">
                        {{pr.name}}
                    </td>
                    <td class="tableTitles">
                        {{pr.id}}
                    </td>
                    <td class="tableTitles">
                        {{pr.street}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

.CS

.card {
    margin-top: 16px;
    margin-left: 16px;
    height: 400px;
    margin-right: 16px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    opacity: 1;
    border: 2px solid red;
}

.header {
    width: 100%;
    height: 40px;
    background: #ECF2F9 0% 0% no-repeat padding-box;
    border-radius: 8px 8px 0px 0px;
}

.header h1 {
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    color: #4D4F5C;
}

Проблема

Answer 1

Добавьте

word-break: break-all;

к <table> в CSS, и в случае необходимости слова будут разбиты.

.card {
    margin-top: 16px;
    margin-left: 16px;
    height: 400px;
    margin-right: 16px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    opacity: 1;
    border: 2px solid red;
}

.header {
    width: 100%;
    height: 40px;
    background: #ECF2F9 0% 0% no-repeat padding-box;
    border-radius: 8px 8px 0px 0px;
}

.header h1 {
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    color: #4D4F5C;
}

.card-table {
  word-break: break-all;
}

<div _ngcontent-qii-c0="" style="width:20%">
  <div _ngcontent-qii-c0="" class="card">
    <div _ngcontent-qii-c0="" class="card-header header">
      <h1 _ngcontent-qii-c0="">My Table</h1>
    </div>
    <table _ngcontent-qii-c0="" class="card-table table-borderless myTable" style="overflow-y: auto; overflow-x: auto;">
      <thead _ngcontent-qii-c0="">
        <tr _ngcontent-qii-c0="">
          <th _ngcontent-qii-c0="" scope="col tableTitles">Title</th>
          <th _ngcontent-qii-c0="" scope="col tableTitles">Name</th>
          <th _ngcontent-qii-c0="" scope="col tableTitles">ID</th>
          <th _ngcontent-qii-c0="" scope="col tableTitles">Street</th>
        </tr>
      </thead>
      <tbody _ngcontent-qii-c0="">
        <tr _ngcontent-qii-c0="" class="tableColor">
          <td _ngcontent-qii-c0="" class="tableTitles"> asdasdad </td>
          <td _ngcontent-qii-c0="" class="tableTitles"> asdasdas assd </td>
          <td _ngcontent-qii-c0="" class="tableTitles"> 123123 </td>
          <td _ngcontent-qii-c0="" class="tableTitles"> asdsadasdcas asdsad </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Я немного сжал его, чтобы показать результат, и использовал сгенерированный HTML из вашей демонстрации, потому что это проблема CSS, поэтому мы не делаем нужно Angular здесь.