Responsive table inside a card

Question

I created a card using the bootstrap. Within that card I intend to insert a table with data.

My problem is that when reducing the screen (check responsiveness), the data in the table comes out of the card.

How can I solve this problem of mine, can someone help me?

Thanks

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;
}

Problem

Answer 1

Add

word-break: break-all;

to <table> in CSS and it will break words if necessary.

.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>

I squeezed it a bit to show the result and used generated HTML from your demo, cause it's a CSS problem, so we don't need Angular here.