set width of first column in table and keep it visible

user_2730554 0
Viewed 39

I am using bootstrap for the first time & is very helpful. I have one issue on the table I'm working on. I want to set the first column width & make it always visible but I can't do either. I have been able to make the table header always visible.

I tried the below on my 'metric' column but nothing changes. What am I doing wrong?

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

my js fiddle code

bootstrap-4 css html
1 Answers

You can set a absolute value on the first column of a table by adding extra styling to your 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>

user_155451160
Related