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

.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

It all depends what you want to achieve? You can hide the excessive text (with or without ellipsis) or you can break words. Right now the minimum width of your table content is a sum of all widest words in each column. — Buszmen, Mar 12 '20 at 20:10
Maybe try overflow-x: scroll; instead of overflow-x: auto; for the table style. Hopefully scroll bars will appear below. — Steve, Mar 12 '20 at 20:14
@Buszmen Thanks for the reply. I intend to show the entire text, without ellipsis. If necessary breaks the line, is it possible? — S3ck Stros, Mar 12 '20 at 20:14
@Steve I tested this, but the card header doesn't follow the overflow — S3ck Stros, Mar 12 '20 at 20:15

Buszmen · Accepted Answer · 2020-03-12T20:24:16.787

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.

Thanks! Worked perfectly ! – S3ck Stros Mar 12 '20 at 20:38 — S3ck Stros, Mar 12 '20 at 20:38

Responsive table inside a card

1 Answers1