Question

背景：在查找如何制作一个可滚动的表格以保持标题行固定而垂直滚动表格的其余部分后，我在一个名为jsfiddle.net的网站上找到了一个级联样式表

我做了一些修改，这是我的css：

html, body{
  margin:0;
  padding:0;
  height:100%;
}

section {
  position: relative;
  border: 1px solid #000;
  padding-top: 50px;
  background: #500;
}

section.positioned {
  position: absolute;
  top:100px;
  left:25px;
  width:750px;
  box-shadow: 0 0 15px #333;
}

div.container {
  overflow-y: auto;
  height: 0px;
}

table {
  border-spacing: 0;
  width:98%;
}

td + td {
  border-left:1px solid #eee;
}

td, th {
  border-bottom:1px solid #eee;
  padding: 5px 5px;
}

th {
  height: 0;
  text-align: center;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}

th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding-top: 5px; 
  margin: auto;
/*  margin-left: -5px; */
  text-align: center;
  top: 0;
  line-height: normal;
  border-left: 2px solid #F88;
}

div.secondrow{
  position: absolute;
  background: transparent;
  color: #fff;
  padding-top: 5px; 
  margin: auto;
/*  margin-left: -5px; */
  text-align: center;
  top: 25px;
  line-height: normal;
  border-left: 2px solid #F88;
}

th:first-child div{
  border: none;
}

它在HTML中的工作原理如下：

<section id="mySection" class="">
    <div id="myDiv" class="container">
        <table id="myTable"></table>
    </div>
</section>

请注意，样式表中的高度设置为0，数据由javascript填充，此时它将表的高度设置为适当的大小。（800像素）。

-5px的注释余量还意味着标题中的边框略微位于表格中的边界。但我在另一个答案中做了自动作为建议。

然而它仍然无效。我不得不在标题名称中添加一个＆amp; nbsp，这样它们就不会挤到边框上。（我删除了左边填充，因为我想要居中对齐）。

我应该指出的一点是，可见文本实际上不在部分内，而是在嵌套内部。

因此，此时的实际HTML看起来像：

<th><div class="secondrow">&nbsp;Prev</div></th>

Answer 1

我建议完全更改表格的结构。

样式表中存在许多错误：

绝对没有理由在div内有th。
thead，th＆amp;的高度冻结行的th为零，div被操纵以保持不变，这本质上是一个坏主意。
该表的父section已被赋予padding以提供顶行div的背景，这与表格结构一样糟糕。

使用这样的结构破坏了使用表的全部目的。

为了更好地了解表格结构，请浏览MDN Table article以了解有关最佳做法的更多信息。

我找到了一个更好的表格结构，其中包含一个冻结的行。请仔细阅读它。

小提琴：https://jsfiddle.net/nashcheez/esu0m57q/3/

参考代码：

table {
  position: relative;
  width: 100%;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/

thead {
  width: 100%;
  overflow-y: scroll;
  display: table;
  table-layout: fixed;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

tbody {
  width: 100%;
  overflow: auto;
  height: 300px;
  display: block;
}

tbody td {
  background-color: #bbc;
  border: 1px solid #222;
  height: 40px;
}

tr {
  width: 100%;
  display: table;
  table-layout: fixed;
}

tbody tr td:nth-child(1) {
  /*seperates the first column from the tbody*/
  background-color: #99a;
}

<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian</td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

CSS文本对齐中心在div内部被忽略

1 个答案: