Question

我一直在尝试使用Bootstrap 4网格容器构建表。除一个问题外，其他所有内容看起来都很不错（样式，对齐方式...）：表未按预期跟随网格容器。尝试调整浏览器大小时，似乎只有第一列会扩大/缩小。

我使用display属性来构建表来解决对齐问题，但是一旦我尝试将col-#用作列的类名，它似乎就无法工作。

.my-table {
  border: 1px solid grey;
  display: table;
  padding: 0;
}

.my-table-row-header {
  display: table-header-group;
  height: 50px;
}

.first-header-column {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.my-table-body {
  display: table-row-group;
}

.my-table-row {
  height: 50px;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  display: table-row;
}

.row-cell {
  display: table-cell;
  vertical-align: middle;
  border-right: 1px solid grey;
}

.c-column {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}

<div class="container-fluid no-gutters">
  <div class="my-table col-9 table">
    <div class="my-table-row-header row">
      <div class="first-header-column col-1 row-cell">
        <span class="c-column">c</span>
      </div>
      <div class="second-column col-4 row-cell">
        <span>text</span>
      </div>
      <div class="third-column col-4 row-cell">
        <span>text</span>
      </div>
    </div>
    <div class="my-table-body">
      <div class="my-table-row row">
        <div class="first-column col-1 row-cell">
          <span class="c-column">c</span>
        </div>
        <div class="second-column col-4 row-cell">
          <span>text</span>
        </div>
        <div class="third-column col-4 row-cell">
          <span>text</span>
        </div>
      </div>
      <div class="my-table-row row">
        <div class="first-column col-1 row-cell">
          <span class="c-column">c</span>
        </div>
        <div class="second-column col-4 row-cell">
          <span>text</span>
        </div>
        <div class="third-column col-4 row-cell">
          <span>text</span>
        </div>
      </div>
    </div>
  </div>
</div>

Jsfiddle：https://jsfiddle.net/4zn5oby6/2/

如果您尝试调整浏览器的大小，则会看到第一列的大小相应地进行了调整。我希望它严格遵循网格容器的大小。

P.S。由于我的表格包含其他组件（而不仅仅是文本），因此我想保留display属性，以确保样式尽可能正确。谢谢。

Answer 1

我不清楚这个问题到底是什么，但我注意到col-9必须位于其自己的div中。然后等于12列，然后添加col-3 div。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<style>
	.my-table {
  border: 1px solid grey;
  display: table;
  padding: 0;
}

.my-table-row-header {
  display: table-header-group;
  height: 50px;
}

.first-header-column {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.my-table-body {
  display: table-row-group;
}

.my-table-row {
  height: 50px;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  display: table-row;
}

.row-cell {
  display: table-cell;
  vertical-align: middle;
  border-right: 1px solid grey;
}

.c-column {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}
	</style>
</head>

<body>
	<div class="container-fluid no-gutters">
		<div class="col-9">
  <div class="my-table  table">
    <div class="my-table-row-header row">
      <div class="first-header-column col-1 row-cell">
        <span class="c-column">c</span>
      </div>
      <div class="second-column col-4 row-cell">
        <span>text</span>
      </div>
      <div class="third-column col-4 row-cell">
        <span>text</span>
      </div>
    </div>
    <div class="my-table-body">
      <div class="my-table-row row">
        <div class="first-column col-1 row-cell">
          <span class="c-column">c</span>
        </div>
        <div class="second-column col-4 row-cell">
          <span>text</span>
        </div>
        <div class="third-column col-4 row-cell">
          <span>text</span>
        </div>
      </div>
      <div class="my-table-row row">
        <div class="first-column col-1 row-cell">
          <span class="c-column">c</span>
        </div>
        <div class="second-column col-4 row-cell">
          <span>text</span>
        </div>
        <div class="third-column col-4 row-cell">
          <span>text</span>
        </div>
      </div>
    </div>
			</div></div>
		<div class="col-3"></div>
</div>
</body>
</html>

Answer 2

因此，我找到了解决方法。我没有使用display: table-cell以及所有vertical-align和text-align废话，而是使用display: flex来遵守引导网格列的宽度（我仍然不确定为什么吗？）。

表上的列宽不跟随引导程序上的网格容器宽度吗？

2 个答案: