Fixed Column, HTML Table with BOOTSTRAP 3

Question

Fixed Column, HTML Table with BOOTSTRAP 3

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need the first column to be fixed, "fixed", that is, I can scroll on the X axis and continue to show the data in the first column.

I'M USING BOOTSTAP 3

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th scope="col">FIJAR</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">FIJAR</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
         <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
    <tr>
    <th scope="row">FIJAR</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
         <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
    <tr>
      <th scope="row">FIJAR</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
         <td>@mdo</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
  </tbody>
</table>

html5 html css3 bootstrap

asked by nawelittle 12.01.2018 в 19:03

source

2 answers

0

HTML code:

 <div>
      <table class="sticky">
        <thead>
          <tr>
            <th class="headcol">RM</th>
            <th>Average</th>
            <th>Lala</th>
            <th>Lilo</th>
            <th>Epley</th>
            <th>Mayhew</th>
            <th>O'Conner</th>
            <th>Roco</th>
            <th>Lander</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="headcol">1RM</td>
            <td style="font-size: 120%;"><strong>12</strong>
            </td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
          </tr>
          <tr>
            <td class="headcol">2RM</td>
            <td><strong>11</strong>
            </td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">3RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">4RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">5RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">6RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">7RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">8RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td class="headcol">9RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td class="headcol">10RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
          </tr>
        </tbody>

      </table>

</div>

Code css:

div {
  overflow-x:scroll;  
  margin-left:2em;
    }
.headcol {
  position:absolute;
    width:2em;
    left:0;
    }

answered by 15.01.2018 в 10:08

How to allow EditText with only two decimals? Block home button

score 1 · Accepted Answer

Assign position: absolute to the column you want to remain fixed, and padding-left: 74.5px!important; to the next one so that it can be displayed

Tested in Firefox, Chrome and Safari

table {
  display: block;
  overflow-x: auto;
}

.static {
  position: absolute;
  background-color: white;
}

.first-col {
  padding-left: 74.5px!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr>
      <th class="static" scope="col">FIJAR</th>
      <th class="first-col" scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>