表格内容不应与固定表格列换行

Question

我想实现两件事： 1. 表格单元格内容不应在第二行换行，除非用“br”标签分隔。 2. 表头列应与可滚动表保持固定。 HTML：

<a href="javascript:;" onclick="document.getElementById('search-history-popup').style.display='block'">Popuup</a>
<br><br>
<div style="position:relative">
<div id="search-history-popup" style="display:none; position:absolute">
    <div>
    <table class="table table-bordered table-hover">
        <tbody>
        <tr>
        <th colspan="2">Criteria</th>
        <th>Results</th>
        </tr>
        <tr><td>Long Name<br/>Short Name</td><td><b>Sample Personal (PFA)</b><br/>Sample (PFA)</td><td>1</td></tr>
        <tr><td>Long Name</td><td><b>Longer text Sample Personal (PFA)</b></td><td>1</td></tr>
        <tr><td>Long Name</td><td><b>More n more text to checj width Sample Personal (PFA)</b></td><td>1</td></tr>
        <tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
        <tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
        <tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
        </tbody>
    </table>
</div>
</div>
</div>

CSS：

body {font:normal 12px Arial}
.table {
  margin-bottom: 5px; 
  padding:0;
}
.table-bordered {
  margin-top: 5px; 
}
.table-bordered th {
    background-color: #f9f9f9; 
    border:1px solid green;
    padding: 4px 8px;   
}
.table-bordered td {
    line-height: 2em;
    padding: 4px 8px; 
    border:1px solid green;
}
.table-hover > tbody > tr:hover > td {
  background-color: #EEFFE1;
  cursor: pointer; 
}
.innertable {height:250px; overflow:auto; border:1px solid #000;}

JS Fiddle 链接： 没有滚动条 - 表数据没有结束： http://jsfiddle.net/L4j1vab2/1/

但是一旦我通过固定高度和溢出应用滚动条，表格数据就会被包装。 http://jsfiddle.net/L4j1vab2

请点击“Popuup”链接查看弹出表：

我的要求是表格数据不应该换行，表格数据应该是可滚动的，保持表格标题固定。

Answer 1

将white-space: nowrap; 添加到您的TD 和TH 样式以防止换行：

.table-bordered td {
    line-height: 2em;
    padding: 4px 8px; 
    border:1px solid green;
    white-space: nowrap;
}

固定标题行：

HTML/CSS 无法做到这一点。我自己通过使用 Javascript 在悬停在表 DIV 上方和顶部的固定 DIV 中创建标题行 DOM 的副本来完成它。 JS 代码还需要回调来正确响应窗口大小调整。

另一种解决方案是固定表格及其列的宽度，并在现有表格的上方创建第二个表格，宽度相同，只有标题行。