html - 表格内容不应该用固定的表格列换行

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 代码还需要回调以正确响应窗口大小调整。

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