Question

我想要实现两件事： 1.除非用＆＃34; br＆＃34;标签。 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

请点击链接＆＃34; Popuup＆＃34;看到弹出表：

我的要求是表数据不应该换行，并且表数据应该是可滚动的，以保持表头不变。

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

另一个解决方案是修复表格及其列的宽度，并在现有的第二个表格上方创建第二个表格，其宽度与页眉行相同。

表内容不应包含固定表列

1 个答案: