如何使表没有固定标题

时间：2016-10-24 11:34:26

标签： javascript jquery html css

我有一张没有thead标签的桌子。

    $("input:checkbox:not(:checked)").each(function() {
       var column = "table ." + $(this).attr("name");
       $(column).hide();
    });
    
    $("input:checkbox").click(function(){
       var column = "table ." + $(this).attr("name");
       $(column).toggle();
      })
  

 

<style>
.scroll-table {
  
  table-layout: fixed;
  border-collapse: collapse;
overflow-x:scroll;
}
.scroll-table thead {
  display: block;
}
.scroll-table thead th {
  background: #ddd;
  width: 150px;
  float: left;
  display: block;
  padding: 15px;
  border-collapse: collapse;
}
.scroll-table tbody {
  display: block;
  height: 262px;
  overflow: auto;
  width: 450px;
  table-layout: fixed;
}
* {
  box-sizing: border-box;
}
td {
  border: 1px solid #ccc;
  padding: 15px;
  width: 150px;
}
</style>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p style="margin-left:15px;"> Additional information select below: </p>
           <p style="display:inline; margin-left:15px">
         <input type="checkbox" name="vendor"  />Vendor Details
         <input type="checkbox" name="ONX"  />Quantity Level
         <input type="checkbox" name="Cost" /> Cost Detail
        <!-- <li><input type="checkbox" name="d"  />d</li> -->
             
              </p>
        <table id="testTable" class="scroll-table" >
            <caption ><u><h2 >ITEM ONHAND QUANTITIES & GOODS IN TRANSACTION</h2></u></caption>
            	
           
            <thead>
<tr class="header" style="background-color: #3f91bd;color:white;
            /* position: absolute;
            width: 83%; */">
            <th class="first">ITEM CODE</th>
        <th class="second">ITEM NAME</th>
        <th class="third">UNIT</th>
        <th class="headcol">ON HAND QTY</th>
          <th class="headcol">GIT</th>
           <th class="headcol">ATP</th>
           <th class="ONX" name="ONX">ONX LOW LMT</th>
            <th class="ONX"  name="ONX">ONX HIGH LMT</th>
             <th class="ONX"  name="ONX">ONX RE-ORDER-LEVEL</th>
              <th class="Cost">AVG COST</th> 
           <th class="Cost" >LAST PO PRICE</th>
           <th class="vendor" name="vendor">V_CODE</th>
           <th class="vendor">MAIN_VENDOR</th>
           <th class="vendor">VENDOR_TYPE</th>
           <th class="vendor">Vendor Mx LEAD TIM</th>
         </tr>

    </thead>  
    <tbody style="border: 1px solid green; overflow-y: scroll; overflow-x: scroll; height:400px; width:850px"> 
             <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td class="ONX">aaa</td>
            <td class="ONX">aaa</td>
            <td class="ONX">aaa</td>
            <td class="Cost">aaa</td>
            <td class="Cost">aaa</td>
            <td class="vendor">aaa</td>
            <td class="vendor">aaa</td>
            <td class="vendor">aaa</td>
            <td class="vendor">aaa</td></tr>
    
            <tr><td>bbb</td><td>bbb</td><td>bbb</td><td>bbb</td><td>bbb</td><td>bbb</td><td class="ONX">bbb</td><td class="ONX">bbb</td><td class="ONX" >bbb</td><td class="Cost">bbb</td><td class="Cost">bbb</td><td class="vendor">bbb</td><td class="vendor">bbb</td><td class="vendor">bbb</td><td class="vendor">bbb</td></tr>

这里的列属于类供应商，ONX和成本将根据复选框选择显示。

这是动态生成的非常大的表。所以我想让它的标题固定。我尝试了不同的方法，如添加标题thead无法显示正确的对齐，也使用了一些插件。失败的一种或另一种方式。

任何人都可以建议我如何修复内容？

3 个答案:

答案 0 :(得分：1)

试试这段代码：

＆＃13;
＆＃13; 
table,tr,th,td{
border:1px solid #dddddd;
  border-collapse:collapse;
}
＆＃13; 
<table style="width:300px">
<tr height="30">
  <th width="30%">He</th>
  <th width="30%">ad</th>
  <th width="40%">er</th>
  </tr>
</table>
<div style="width:317px; overflow:auto; height:100px;">
<table style="width:100%;">
  <tr height="30">
    <td width="30%">td</td>
    <td width="30%">td</td>
    <td width="40%">td</td>
  </tr>
  <tr height="30">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr height="30">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr height="30">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr height="30">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr height="30">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

提供一个css来设置标签的宽度，如：

<th width="70%">

或

<th width="50px">

答案 2 :(得分：0)

有两种方法。一个使用纯CSS，另一个使用jQuery。

.scroll-table {
  width: 450px;
  table-layout: fixed;
  border-collapse: collapse;
}
.scroll-table thead {
  display: block;
}
.scroll-table thead th {
  background: #ddd;
  width: 150px;
  float: left;
  display: block;
  padding: 15px;
  border-collapse: collapse;
}
.scroll-table tbody {
  display: block;
  height: 262px;
  overflow: auto;
  width: 450px;
  table-layout: fixed;
}
* {
  box-sizing: border-box;
}
td {
  border: 1px solid #ccc;
  padding: 15px;
  width: 150px;
}
<table class="table scroll-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr>
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr>
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>

或者如果你想要jQuery方法。 检查我的codepen： Codepen for Responsive tables using jQuery

相关问题
最新问题