3

我使用引导程序创建了一张卡片。在该卡中，我打算插入一个包含数据的表格。

我的问题是在缩小屏幕时（检查响应性），表中的数据从卡中出来。

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

谢谢

演示

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

问题

图片

4

1 回答 1

4

添加

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。

于 2020-03-12T20:16:30.187 回答