没有指定宽度的表格的CSS固定标题

Question

当我们向下滚动正文 (tbody) 部分时，我已经搜索了很多次以获得正确的解决方案来使表头 (thead) 保持不变。有很多解决方案，但没有任何帮助。

一些尝试过的链接：

• How to make Scrollable Table with fixed headers using CSS
• https://jsfiddle.net/dPixie/byB9d/3/
• http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

大多数链接都为每个tr td 使用固定宽度，但我需要它而不为元素指定任何宽度，因为表格是动态生成的。标题和内容可能长或短，因此宽度取决于内容。

还有其他解决方案可以正确对齐th 和td？

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_headers thead tr {
  display: block;
  position: relative;
}

.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  max-height: 200px;
}

<table class="fixed_headers" border="1" cellpadding="5" cellspacing="0">
  <thead>
    <tr>
      <th>Lorem Ipsums</th>
      <th>ipsum dolor sit amet</th>
      <th>consectetur adipiscing</th>
      <th>do eiusmod tempor incididunt</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>quis nostrum exercitationem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以将position:sticky 用于这样的固定标头

• 用relative div 将table 包裹起来，并设置您要修复的高度。
• 将“th”指定为sticky。因为粘性仅适用于表格内的th 和td
• 为th提供背景色，否则会显得透明。
• th 上指定的 CSS 边框将在标题固定在顶部后消失（出于某种原因，我不知道）。

.fixed-headers {
  width: 100%;
  position: relative;
  overflow-y: scroll;
  height: 300px;
}

.fixed-headers table {
  table-layout: fixed;
  width: 100%;
}

.fixed-headers thead tr th {
  position: sticky;
  top: 0px;
  background-color: white;
}

<div class="fixed-headers">
  <table border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr>
        <th>Lorem Ipsums</th>
        <th>ipsum dolor sit amet</th>
        <th>consectetur adipiscing</th>
        <th>do eiusmod tempor incididunt</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

这不是最好的，但您可以强制设置表头前三列和表体第一行单元格的宽度。您需要就列的布局方式提供一些启发式方法。

我修改了a stylesheet I found on Google。

我在下面添加了一个可选的 JavaScript 脚本来计算列的宽度，以防您不想显式设置它们。

var cols = document.querySelectorAll('.fixed-header tr th'),
    rows = document.querySelectorAll('.scroll-content tr'),
    numOfCols = cols.length,    // Number for columns in table
    colRatio = 100 / numOfCols, // Percentage width of a single column
    scrollWidth = 18,           // Width of the scroll bar
    tableWidth = document.querySelector('.table-container').clientWidth,
    widthDiff = percentDiff(tableWidth, tableWidth + scrollWidth, numOfCols);

cols.forEach((col, index) => {
  if (index < numOfCols - 1) {
    col.setAttribute('width', (colRatio - widthDiff) + '%');
  }
});

rows.forEach((row, i) => {
  if (i === 0) {
    row.querySelectorAll('td').forEach((cell, j) => {
      if (j < numOfCols - 1) {
        cell.setAttribute('width', colRatio + '%');
      }
    });
  }
  row.className += (i % 2 === 1) ? ' alternate-row' : 'normal-row';
});

function percentDiff(n, m, p) {
  return (Math.abs(n - m) / ((n + m) / 2) * 100) / p;
} 

/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.table-container {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 618px;     /* Add width for scrollbar */
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.table-container {
  overflow: hidden;
  width: 600px;      /* Width of the table */
}


/* define width of table. IE browsers only */
div.table-container table {
  float: left;
  /* width: 740px */
}


/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.table-container table {
  /* width: 756px */
}


/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixed-header tr {
  position: relative;
}


/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* make the TH elements pretty */
thead.fixed-header th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}

html>body tbody.scroll-content {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}

html>body thead.fixed-header {
  display: table;
  overflow: auto;
  width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scroll-content td,
tbody.scroll-content tr.normal-row td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

tbody.scroll-content tr.alternate-row td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

<div class="table-container">
  <table border="0" cellpadding="0" cellspacing="0" class="scroll-table">
    <thead class="fixed-header">
      <tr>
        <!-- width="24.667px" --> <th>Lorem Ipsums</th>
        <!-- width="24.667px" --> <th>ipsum dolor sit amet</th>
        <!-- width="24.667px" --> <th>consectetur adipiscing</th>
        <th>do eiusmod tempor incididunt</th>
      </tr>
    </thead>
    <tbody class="scroll-content">
      <tr>
        <!-- width="25px" --> <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td> 
        <!-- width="25px" --> <td>accusantium doloremque laudantium</td>
        <!-- width="25px" --> <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>

    </tbody>
  </table>
</div>