Html 设置表中第一列的宽度并保持可见

发布于07月08日

我第一次使用bootstrap&amp；非常有帮助.我有一个问题要解决.我想设置第一列的宽度&amp；让它始终可见，但我也做不到.我已经能够使表格标题始终可见.

我在我的"指标"栏上try 了以下内容，但没有任何变化.我做错了什么？

<th style="width: 30%">metric</th>

my js fiddle code

推荐答案

通过向css中添加额外的样式，可以在表的第一列上设置绝对值.

tr > th:first-child {
  min-width: 100px;
}

/* new style */
tr>th:first-child {
  min-width: 100px;
}

.tableFixHead {
  overflow: auto;
  height: 100px;
  width: 240px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.tableFixHead tbody th {
  position: sticky;
  left: 0;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: aqua;
}

table.table-fit {
  width: auto !important;
  table-layout: auto !important;
}

table.table-fit thead th,
table.table-fit tfoot th {
  width: auto !important;
}

table.table-fit tbody td,
table.table-fit tfoot td {
  width: auto !important;
}

.tooltip {
  font-size: 30rem;
}

.tooltip-inner {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #721c24;
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #00cc00 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
  border-left-color: #00cc00 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #00cc00 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
  border-top-color: #00cc00 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<table class="table table-striped table-hover tableFixHead">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Metric</th>
      <th scope="col">Col one</th>
      <th scope="col">Col two</th>
      <th scope="col">Col three</th>
      <th scope="col">Col four</th>
      <th scope="col">Col five</th>
      <th scope="col">col six</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 1
      </td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 2
      </td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
      <td>0.6</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="no info">
        metric 3
      </td>
      <td>0.3451644415499837</td>
      <td>0.32830820770519265</td>
      <td>0.3167259786476868</td>
      <td>0.3641249580114209</td>
      <td>0.30167844522968196</td>
      <td>0.3543411194358748</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 4
      </td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 5
      </td>
      <td>0.2</td>
      <td>0.2</td>
      <td>0.2</td>
      <td>0.2</td>
      <td>0.1</td>
      <td>0.1</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 6
      </td>
      <td>0.9</td>
      <td>0.9</td>
      <td>0.9</td>
      <td>0.9</td>
      <td>0.9</td>
      <td>0.9</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 7
      </td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.4</td>
      <td>0.3</td>
      <td>0.3</td>
    </tr>
    <tr>
      <td data-toggle="tooltip" data-placement="top" data-html="true" title="some useful info">
        metric 8
      </td>
      <td>0.1</td>
      <td>0.1</td>
      <td>0.1</td>
      <td>0.1</td>
      <td>0.1</td>
      <td>0.1</td>
    </tr>
  </tbody>
</table>