没有指定宽度

Question

当我们向下滚动body（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使用固定宽度，但我需要它而不指定元素的任何宽度，因为表是动态生成的。标题＆amp;内容可能很长或很短，因此宽度取决于内容。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将position:sticky用于此类

的固定标题

• 用table div包裹您要修复的高度relative。
• 指定＆＃39;＆＃39;为sticky。因为粘贴仅适用于表格内的th和td
• 为th提供背景颜色，否则它将显示为透明。
• th上指定的CSS边框会在顶部标题修复后消失（出于某些原因我不知道）。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这不是最好的，但你可以强制表格头部中前三列的宽度和表格主体中第一行的单元格。您需要提供一些关于如何布置列的启发式方法。

我修改了a stylesheet I found on Google。

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

private void btnsend_Click(object sender, EventArgs e)
    {
        client.WriteLineAndGetReply(txtmessage.Text, 
        TimeSpan.FromSeconds(3));
    }

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
}