文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使表头固定，保持最长td的宽度

问使表头固定，保持最长td的宽度
EN

Stack Overflow用户
提问于 2014-09-26 17:09:26
回答 1查看 182关注 0票数 0

我只是不知道有什么问题，我有一个HTML表格，我想让表格标题保持在一个固定的位置，并保持最长td的宽度。我需要一个脚本和th元素必须是固定的宽度没有javascript和简单的CSS

代码语言：javascript
复制
    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;
    }
代码语言：javascript
复制
<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>

​

html
css
EN

回答 1

Stack Overflow用户

发布于 2014-09-26 17:33:48

试着像这个例子一样。

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/26055957

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档