如何使表头相对于内容 Bootstrap ？

xfyts7mz 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(1)|浏览(151)

这是我有的：

我使用Angular 和引导。现在我想使表格标题相对于下面容器内的文本定位。
我试过使用html表格，但遗憾的是你不能像上面图片中那样用html表格来制作表格。目前我使用bootstrap列来对齐窗口小部件内部的标题和内容。有人知道我如何将窗口小部件内部的列与标题列"链接"起来吗？因此，如果名称列很长，图像标题就会移到右边。与小部件内的图像列对齐。
这是我的当前代码：第一个月

<div class="widget d-flex">
    <div class="row">
        <div class="col d-flex text-center">
            <div class="iconWrapper"></div>
            <div class="textWrapper my-auto">
                <p class="headingText">mongodb-1</p>
                <div class="state d-flex">
                    <span class="stateText mx-auto">RUNNING</span>
                </div>
            </div>
            <span class="imageText my-auto">
                mongodb:latest
            </span>
            <span class="portText my-auto">
                127.0.0.1:9090->80/tcp
            </span>
        </div>
    </div>
</div>

containers.component.html

<div class="col-5">
    <div class="row justify-content-left">
        <div class="col-5">
            <p class="name text-start">Name</p>
        </div>
        <div class="col-4">
            <p class="image text-start">Image</p>
        </div>
        <div class="col-1">
            <p class="port text-start">Ports</p>
        </div>
    </div>
   
    <ng-container *ngIf="this.containerService.getContainers() != null">
        <div class="row justify-content-left h-10 rowTop" *ngFor="let container of this.containerService.getContainers()">
                    <app-widget></app-widget>
        </div>
    </ng-container>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74987059/how-to-make-table-header-relative-to-content-bootstrap

1条答案

按热度按时间

qlfbtfca1#

这就是为什么必须使用table s或grid s的原因。我看不出有什么理由不能使用表复制上面的示例？
下面是我为复制您的示例而创建的示例表的代码-我还将整个组件添加到溢出的容器中，以防它耗尽空间：

- 超文本标记语言：**

<div class="overflown-container">
  <table>
    <thead>
      <tr>
        <td>&nbsp;</td>
        <td>Name</td>
        <td>Image</td>
        <td>Ports</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://placekitten.com/48/48"></td>
        <td>mongo-db-1<br><span class="label">RUNNING</span></td>
        <td>mongodb:latest</td>
        <td>127.0.0.1:9090->80/tcp</td>
      </tr>
    </tbody>
  </table>
</div>

- 中央支助组：**

.overflown-container {
  overflow-x: auto;
}

table {
  border-spacing: 0;
  border-padding: 0;
}

table img {
  border-radius: 5px;
}

table tbody tr td {
  padding: 10px;
  background: tomato;
}

table tbody tr td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

table tbody tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.label {
  background: green;
  color: #fff;
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
}

下面是一个工作样本或多或少你是什么后，调整到您的实际设计：
https://jsfiddle.net/7cybnut5/2/

赞(0）回复(0）举报 2023-01-03

我来回答

如何使表头相对于内容 Bootstrap ？

1条答案

相关问题

热门标签

最新问答