CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FLash
FLash

Reputation: 746

Fixed row inside a horizontally scrollable table

I have a very long table with horizontal scrolling. Is it possible to implement a fixed row inside this table without horizontal scroll.

	<div class="container" style="width:500px;height:100px;overflow:auto;position:relative;">
		<table style="width:1500px;">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
			</tr>
			<tr style="width:500px;height:200px;left:0;right:0">
				<td colspan="7" style="width:500px;">
					<div id="noscroll" style="display: inline-block;">A row unaffected by horizontal scroll</div>
				</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
			</tr>
		</table>
	</div>

EDIT: What if I need two cell in the fixed row?

<tr class="fixed-row">
    <td colspan="3">
        A row unaffected by
    </td>
    <td colspan="3">
         horizontal scroll
    </td>
</tr>

https://jsfiddle.net/7nz6ys2m/2/

Upvotes: 2

Views: 1421

Answers (2)

FLash
FLash

Reputation: 746

With a little bit of jQuery, we can get the behavior with safe vertical scrolling.

<div class="container" style="width:500px;height:300px;overflow:auto;">
    <table style="width:1500px;height:500px;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>       
        <tr style="">
            <td colspan="6" style="">
                <div class="fixed-row">A row unaffected by horizontal scroll</div>

            </td>
        </tr>   
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>           
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>           
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</div>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
    $(".container").scroll(function () {     
        $(".fixed-row").css("margin-left",$(".container").scrollLeft() + "px");
    });
</script>

<style>
    table{
        border-collapse: collapse;
    }

    table td, table th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    table tr:nth-child(even){background-color: #f2f2f2;}

    table tr:hover {background-color: #ddd;}

    table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }

    .fixed-row { 
        display: inline-block;
        width: 500px;
        text-align: center;
    }
</style>

https://jsfiddle.net/7nz6ys2m/4/

Upvotes: 0

G43beli
G43beli

Reputation: 3962

Try the following:

	<div class="container" style="width:500px;overflow:auto;position:relative;">
		<table style="width:1500px;">
			<tr>
			 <td>1</td>
			 <td>2</td>
			 <td>3</td>
			 <td>4</td>
			 <td>5</td>
			 <td>6</td>
			 <td>7</td>
			</tr>
			<tr style="width:500px;left:0;right:0">
			 <td colspan="7" style="width:500px;height:22px;position: relative;">
			   <div id="noscroll" style="display: inline-block;position: fixed;transform: translateY(-50%);">
                              A row unaffected by horizontal scroll
                           </div>
			 </td>
			</tr>
			<tr>
			 <td>1</td>
			 <td>2</td>
			 <td>3</td>
			 <td>4</td>
			 <td>5</td>
			 <td>6</td>
			 <td>7</td>
			</tr>
		</table>
	</div>

What I did:

Give the noscroll-div position:fixed; and reset its position with transform. Then I set the height of its parent td to a fixed height of 22px (the other td are all 22px) and set its position to relative.

In case you need multiple td in the fixed row, I would rather take multiple div inside one td, and float them left. see this: 

	<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
    <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>
    </tr>
    <tr style="width:500px;left:0;right:0;height:22px;position: relative;">
        <td style="position: fixed;" colspan="7">
            <div style="width:250px;float: left;">
                test1
            </div>
            <div style="width:250px;float:left;">
                test2
            </div>
        </div>
    </tr>
    <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>
    </tr>
</table>
</div>

Upvotes: 2

Related Questions