使表头保持固定位置并保持最长td的宽度

时间：2014-09-26 09:09:26

标签： html css

我只是无法弄清楚问题是什么，我有一个HTML表格，我想让表格标题保持固定位置并保持最长td的宽度。我需要它用于脚本，并且th元素必须是固定的宽度，没有javascript和简单的CSS

＆＃13;
＆＃13; 
    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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

尝试这个例子。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题