TD fixed in ng-repeat

Question

TD fixed in ng-repeat

Navigation

#1 by (3 votes)

-1

I have the following:

my app.css

.fijar-headcol {
  position: absolute;
  background-color: white;
  display: flex !important;
  width:100px;
}

my index.html

<div style="height:500px; overflow: auto;">
  <tr ng-repeat="dat in datos">
    <td class="fijar-headcol">{{dat.title}}</td>
    <td>{{dat.dato1}}</td>
    <td>{{dat.dato2}}</td>
    <td>{{dat.dato3}}</td>
    <td>....</td>
  </tr>
</div>

The problem is that the td that contains data 1, does not exit because it is covering the first td that contains the title

Here's the example:

.fijar-headcol {
  position: absolute;
  background-color: white;
  /* Centramos */
  display: flex !important;
/*   justify-content: center; */
/*   align-items: center; */
  width:100px;
}

<div style="height:500px; overflow: auto;">
<table class="table">
  <tr>
    <td class="fijar-headcol">dat.title</td>
    <td>dat.dato1</td>
    <td>dat.dato2</td>
    <td>dat.dato3</td>
    <td>dat.dato1</td>
    <td>dat.dato2</td>
    <td>dat.dato3</td>
    <td>....</td>
    <td>dat.dato1</td>
    <td>dat.dato2</td>
    <td>dat.dato3</td>
    <td>dat.dato1</td>
    <td>dat.dato2</td>
    <td>dat.dato3</td>
    <td>dat.dato1</td>
    <td>dat.dato2</td>
    <td>dat.dato3</td>
    <td>....</td>
  </tr>
 </table>
</div>

javascript html css angularjs

asked by sirdaiz 19.11.2018 в 10:29

source

1 answer

Difference between HTML object and JAVASCRIPT object and how to access and give attributes to javascript objects Why every time I use equals () I get: "java.lang.NullPointerException"? java poo

score 3 · Accepted Answer

You can indicate that the 2nd child, td:nth-child(2) has a padding-left enough so that they do not overlap:

td:nth-child(2){

    padding-left:100px;

}

.fijar-headcol {
  position: absolute;
  background-color: white;
  /* Centramos */
  display: flex !important;
  /*   justify-content: center; */
  /*   align-items: center; */
  width: 100px;
}

td:nth-child(2) {
  padding-left: 100px;
}

<div style="height:500px; overflow: auto;">
  <table class="table">
    <tr>
      <td class="fijar-headcol">dat.title</td>
      <td>dat.dato1</td>
      <td>dat.dato2</td>
      <td>dat.dato3</td>
      <td>dat.dato1</td>
      <td>dat.dato2</td>
      <td>dat.dato3</td>
      <td>....</td>
      <td>dat.dato1</td>
      <td>dat.dato2</td>
      <td>dat.dato3</td>
      <td>dat.dato1</td>
      <td>dat.dato2</td>
      <td>dat.dato3</td>
      <td>dat.dato1</td>
      <td>dat.dato2</td>
      <td>dat.dato3</td>
      <td>....</td>
    </tr>
  </table>
</div>