Question

我有一个非常长的水平滚动表。是否可以在没有水平滚动的情况下在此表中实现固定行。

＆＃13;

	<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>

＆＃13;

编辑：如果我需要固定行中的两个单元格怎么办？

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

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

Answer 1

尝试以下方法：

＆＃13;

	<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>

＆＃13;

我做了什么：

提供noscroll-div position:fixed;并使用transform重置其位置。然后我将其父td的高度设置为22px的固定高度（另一个td都是22px）并将其position设置为相对。

如果您需要固定行中的多个td ，我宁愿在一个td中使用多个div，并将它们向左浮动。看到这个：

＆＃13;

	<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>

＆＃13;

Answer 2

通过一点点jQuery，我们可以通过安全的垂直滚动来获得行为。

<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/

修复了水平可滚动表格内的行

2 个答案: