Question

如何在jQuery中将我的第一列作为固定coulmn。我不想使用除jquery插件之外的任何插件。

请看js小提琴，

这里有2个表，我只想在一个表中。

th,td {
    padding: 5px;
    border: 1px solid #000;
    white-space: nowrap;
}

.table1 {
    float: left;   
}        
.table2 {
    width: 200px;
    overflow: auto;  
}

<div style="width:400px">    
    <table class="table1">
        <tr>
            <thead>
                <th> make me fixed</th>
            </thead>
        </tr>
        <tr>
            <td>value number 1</td>     
        </tr>    
    </table>    

    <div class="table2">
       <table>
           <tr>
               <thead>
                   <th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
               </thead>
           </tr>
           <tr>
               <td> value number 2 </td>        
           </tr>    
       </table>    
    </div>
</div>

请帮助我如何在一个固定列和垂直和水平滚动的表格中实现这一点。

Answer 1

看看这个：

＆＃13;

th,
td {
  padding: 5px;
  border: 1px solid #000;
  white-space: nowrap;
}
.table1 {
  float: left;
  width: 100%;
  table-layout: fixed;
}
.table2 {
  width: 200px;
  overflow: auto;
}

＆＃13;

<div style="width:400px">

  <table class="table1">
    <tr>
      <thead>
        <th>make me fixed</th>
        <th class="table2">make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
      </thead>
    </tr>
    <tr>
      <td>value number 1</td>
      <td class="table2">value number 2</td>
    </tr>
  </table>

</div>

＆＃13;

它使用了表格布局固定，以及设置表格的宽度。

Answer 2

如果第一列可以是固定宽度，则可以执行以下操作：

Value.Index

swap := func(in []reflect.Value) []reflect.Value {
    return []reflect.Value{in[0].Index(1), in[0].Index(0)}
}

makeSwap := func(fptr interface{}) {
    fn := reflect.ValueOf(fptr).Elem()
    v := reflect.MakeFunc(fn.Type(), swap)
    fn.Set(v)
}

var intSwap func(...int) (int, int)
makeSwap(&intSwap)
fmt.Println(intSwap(0, 1))

缺点：

body { font-family: sans-serif; } .table div { overflow: auto; border-left: 1px solid black; } table { width: 800px; border-collapse: collapse; height: 100px; border: 1px solid black; border-left-width: 0; } .table { position: relative; } .table:after { width: 150px; display: block; height: 100%; position: absolute; background: #eee; content: ''; top: 0; left: 0; z-index: -1; border-right: 1px solid black } #head { width: 150px; } td, th { padding: 0; vertical-align: top; padding: 5px; text-align: left; } th { position: absolute; width: 140px; } td { position: relative; z-index: -2; } tr { border-top: 1px solid black; }单元格中的文字只能与顶部对齐。
<div class="table"> <div> <table> <col id="head" /> <tr> <th>make me fixed fhfghghgfhggf</th> <td>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</td> </tr> <tr> <th>value number 1</th> <td>value number 2</td> </tr> </table> </div> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>单元格应该高于th单元格或与td单元格一样高。
需要额外的div

需要一个带有jQuery的表中的固定和可滚动列

2 个答案: