1

I am trying to create a two fixed column table (freeze the first two columns), that respects the widths of the td elements that I give them.

When the two columns get fixed, the widths of the columns are randomly set.

<div id="tableContainer">
<table class="all-table">
                    <colgroup>
                    <col  style="width:30px;" />
                    <col  style="width:30px;" />
                    <col style="width:180px;" />
                    <col style="width:180px;" />
                    <col style="width:180px;" />
                    <col style="width:30px;" />
                </colgroup>
<thead>
<tr>
    <td class="td-fixed gray-background">a</td>
    <td class="td-fixed td-fixed-margin gray-background">a</td>
    <td class="gray-background">aaaaaaaaaaaa</td>
    ...
</tr>
    ...
    </thead>
<tbody>
    <tr>
    <td class="td-fixed white-background">a</td>
    <td class="td-fixed td-fixed-margin white-background" >a</td>
    <td>aaaaaaaaaaaa</td>
    ...
    </tr>
        <tr>
    <td class="td-fixed white-background">a</td>
    <td class="td-fixed td-fixed-margin white-background">a</td>
    <td >aaaaaaaaaaaa</td>
    ...
</tr>
    ...
</tbody>
</table>
</div>

The CSS part can be found in the link.

http://jsfiddle.net/pcmhd42e/8/

http://jsfiddle.net/pcmhd42e/9/ - updated version from gewh

Could not find a workaround that would work with CSS, the solution does not use Bootstrap.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
dare2k
  • 417
  • 2
  • 8
  • 24

4 Answers4

2

I am not sure about the correct method to do it, but this might help.

#tableContainer {
  width: 300px;
  overflow: auto;
  overflow-y: scroll;
}
.td-fixed {
  position: fixed;
  left: 0px;
  width: 30px;
  z-index: 1;
  height: 25px;
}
.white-background {
  background-color: white;
}
.gray-background {
  background-color: gray;
}
.td-fixed-margin {
  margin-left: 31px;
}
.td-fixed-padding {
  padding-left: 31px;
}
.all-table {
  width: 300px;
  margin-top: 0;
  table-layout: fixed;
  border-spacing: 0;
}
td {
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  height: 25px;
  padding: 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.td-editable-position {
  left: 148px;
  position: relative;
}
<div id="tableContainer">
  <table class="all-table">
    <colgroup>
      <col style="width:54px;" />
      <col style="width:180px;" />
      <col style="width:180px;" />
      <col style="width:180px;" />
      <col style="width:30px;" />
    </colgroup>
    <thead>
      <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
    </tbody>
  </table>
</div>
Prachit
  • 374
  • 1
  • 8
1

When using the position rule in CSS, top left right and bottom values are the method of positioning these elements.

I hope this updated fiddle is more what you are after?

gewh
  • 395
  • 1
  • 7
  • Yes, thanks, but the other column that are not fixed, still don't get the desired width. I am mainly stuck in that part. – dare2k Jan 22 '15 at 09:39
  • Perils of the early morning. I see now this doesn't fix your problem at all. It also didn't require the `left` rule I put in, only `width`. It is entirely down to the `colgroup` not working as intended because two of the columns have indeed been taken out of the flow position and into fixed position. [This looks like it might be of use for you](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) and then applying the width in CSS rather than using ``? – gewh Jan 22 '15 at 19:50
1

This code below worked for me. 5 columns btw. You just need to adjust the left pixels in the five fixed columns (first to fifth) to your needs.

.view {
    width: fit-content;
    overflow-x: initial;
}

.wrapper {
    position: relative;
    white-space: nowrap;
    padding: 0px;
}

.sticky-col {
    position: sticky;
    /* border: 1px solid red !important; */
    position: -webkit-sticky;
    background-color: white !important;
    text-align: center;
}

.first-col {
    width: 50px;
    text-align: center;
    left: 0px;
}

.second-col {
    width: 50px;
    left: 50px;
}

.third-col {
    width: 50px;
    left: 100px;
}

.fourth-col {
    width: 50px;
    left: 147px;
}

.fifth-col {
    width: 150px;
    left: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row view">
  <div class="col-md-12 wrapper">
    <table class="table" id="tabelaListaProduto">
      <thead>
        <tr>
          <th class="sticky-col first-col">Column 1</th>
          <th class="sticky-col second-col">Column 2</th>
          <th class="sticky-col third-col">Column 3</th>
          <th class="sticky-col fourth-col">Column 4</th>
          <th class="sticky-col fifth-col">Description</th>
          <th>Brand</th>
          <th>Packing</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
          <th>Image</th>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-col first-col">Lorem</i></td>
          <td class="sticky-col second-col ">Ipsum</td>
          <td class="sticky-col third-col">Dolor</td>
          <td class="sticky-col fourth-col">Amet</td>
          <td class="sticky-col fifth-col">Sitcom</td>
          <td>MULTILASER</td>
          <td>CX</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">Lorem</i></td>
          <td class="sticky-col second-col ">Ipsum</td>
          <td class="sticky-col third-col">Dolor</td>
          <td class="sticky-col fourth-col">Amet</td>
          <td class="sticky-col fifth-col">Sitcom</td>
          <td>MULTILASER</td>
          <td>CX</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
          <td>ABCABC</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
Douglas Vicentini
  • 132
  • 2
  • 11
0

if you are using jQuery I would recommend using Sticky Table plugin. You only need to use their classes to do what you want without changing your code structure or add any crappy JS code.

Ahmed Rafik Ibrahim
  • 538
  • 1
  • 4
  • 16