CODEWITHSUNDEEP
htmlcss
SatAj
SatAj

Reputation: 1979

Table content should not wrap with fixed table column

I want to achieve two things: 1. Table cell content should not wrap in second line unless separated by "br" tag. 2. Table header columns should remain fixed with scrollable table. 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 links: Without scrollbar - table data is not wrapping up: http://jsfiddle.net/L4j1vab2/1/

But as soon as I apply scrollbar through fix height and overflow, table data is getting wrapped. http://jsfiddle.net/L4j1vab2

Please click on the link "Popuup" to see the popup-table:

My requirement is table data should not wrap, and table data should be scrollable keeping table headers fixed.

Upvotes: 3

Views: 2678

Answers (1)

sebnukem
sebnukem

Reputation: 8333

Add white-space: nowrap; to your TD and TH styling to prevent wrapping:

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

Fixed header row:

You can't do that with HTML/CSS. I've done it myself by creating a copy of the header row DOM in a fixed DIV hovering above and on top of the table DIV using Javascript. The JS code also needed callbacks to properly react to window resizing.

Another solution would be to fix the width of the table and its columns, and create a 2nd table just above the existing one with the same widths with just the header row.

Upvotes: 3

Related Questions