0

I just can't figure out whats the problem, I have an HTML table and I want to make the table header stay in a fixed position and to keep the width of the longest td. I need it for a script and the th elements must be fixed width without javascript and simple CSS

    BODY {
      font-family: Arial;
      font-size: 8pt
    }
    .focim {
      margin-left: 400px;
      color: Black;
      font-family: Arial;
      font-size: 15pt;
      font-weight: 900;
      padding-bottom: 20px;
      text-decoration: underline
    }
    Time {
      color: Black;
      font-family: Arial;
      font-size: 10pt;
      font-weight: 500;
      padding-bottom: 20px
    }
    TABLE {
      border-width: 3px;
      border-style: solid;
      border-color: Black;
      border-collapse: collapse;
    }
    TH {
      font-family: Arial;
      font-size: 10pt;
      border-width: 1px;
      border-style: solid;
      border-color: Black;
      background: #b3b3b3;
    }
    TR:first-child {
      position: fixed;
      margin-top: 0px;
      white-space: nowrap;
    }
    TD {
      white-space: nowrap;
      border-width: 1px;
      padding: 3px;
      border-style: solid;
      border-color: Black
    }
    TD:first-child {
      background-color: #C19A6B;
      padding-right: 5px;
      padding-left: 5px
    }
    TR:nth-child(even) {
      background-color: #dddddd;
    }
    tr:hover td {
      background: #4E5066;
      color: #FFFFFF;
      border-top: 1px solid #22262e;
      border-bottom: 1px solid #22262e;
    }
<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>



</table>
Filburt
  • 17,626
  • 12
  • 64
  • 115
LeviD77
  • 25
  • 3

1 Answers1

0

try like this example.

BODY {
  font-family: Arial;
  font-size: 8pt
}
.focim {
  margin-left: 400px;
  color: Black;
  font-family: Arial;
  font-size: 15pt;
  font-weight: 900;
  padding-bottom: 20px;
  text-decoration: underline
}
Time {
  color: Black;
  font-family: Arial;
  font-size: 10pt;
  font-weight: 500;
  padding-bottom: 20px
}
TABLE {
  border-width: 3px;
  border-style: solid;
  border-color: Black;
  border-collapse: collapse;
}
TH {
  font-family: Arial;
  font-size: 10pt;
  border-width: 1px;
  border-style: solid;
  border-color: Black;
  background: #b3b3b3;
}
TR:first-child {
  position: fixed;
  left: 10px;
}
TD {
  white-space: nowrap;
  border-width: 1px;
  padding: 3px;
  border-style: solid;
  border-color: Black
}
TD:first-child {
  background-color: #C19A6B;
  padding-right: 5px;
  padding-left: 5px
}
TR:nth-child(even) {
  background-color: #dddddd;
}
tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>



</table>
Darshak Shekhda
  • 646
  • 5
  • 7
  • I tried this demo earlier, the main problem is, that i can not add dvis, because a script generates the table and the width should not be fixed, the width should go with the longest field for each th - td connection using white-space:nowrap; – LeviD77 Sep 26 '14 at 09:40
  • i edited my answer, i put one more same header and you have already given `position:fixed;` to `tr:first-child`. tell me you like this solution or not. – Darshak Shekhda Sep 26 '14 at 09:52
  • Yes, about that is what i want, only that in this case the header is fixed, but not wide enough, and the th element is not precisely above the td elements – LeviD77 Sep 26 '14 at 12:17
  • try the code in a different file in your own browser, with name attribute like: thistextcouldnotbelongerwithmoreideas this long and youll se that th element "Name" is not changing, it doesnt get any bigger – LeviD77 Sep 26 '14 at 12:32