Question

我有这段代码，我需要粘性.tab1，而.tab2只需粘贴thead。我将把它用于更多的表，所以我需要一点响应代码，如果它可以灵活（调整大小）宽度。

我尝试了一些代码，但他们没有响应代码，灵活的宽度或代码比他必须更难，我想。

<div>
Header
</div>
<table class="tab1">
    <tr>
        <td>NAME</td>
        <td>
      <input type="text" size='20'>
          <input class="button" type="submit" name="button" value="search">
        </td>
    </tr>
</table>

<table class="tab2">
    <thead>
        <tr>
            <th>one</th>
            <th>two</th>
            <th>three</th>
            <th>four</th>
            <th>five</th>
            <th>six</th>
            <th>seven</th>
        </tr>
    </thead>
    <tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr>

</table>

任何想法？

Answer 1

神话般的css sticky最适用于带有display：block的东西。你可以用一小段jquery解决这个问题，比如：

＆＃13;

table{width:100%;}
div{padding:100px;}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

.tab1 {
position: sticky;
top: 0px;}

.tab2 thead {
position: sticky;
top: 20px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Header
</div>
<table class="tab1">
	<tr>
		<td>BAR</td>
		<td>
      <input name='bar' type="text" readonly="readonly" size='20'>
    </td>
		<td>NAME</td>
		<td>
      <input type="text" size='20'>
		  <input class="button" type="submit" name="button" value="search">
		</td>
	</tr>
</table>

<table class="tab2">
	<thead>
		<tr>
			<th>one</th>
			<th>two</th>
			<th>three</th>
			<th>four</th>
			<th>five</th>
			<th>six</th>
			<th>seven</th>
		</tr>
	</thead>
	<tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr>

</table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

＆＃13;

t := Thing
{

    Name: "the name", // <-- This will work because Name start with capital letter 

    someUnexported: 23, // <-- this wont work because someUnexported starts with small letter
}

＆＃13;

粘桌+桌子thead

1 个答案: