卡片内响应 table

Question

我使用 bootstrap 创建了一张卡片。在那张卡片中，我打算插入一个 table 和数据。

我的问题是当缩小屏幕（检查响应能力）时，table中的数据从卡中出来。

如何解决我的这个问题，有人可以帮助我吗？

谢谢

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

卡片内响应 table

Responsive table inside a card

html

css

twitter-bootstrap

bootstrap-4

bootstrap-cards