`
dxynidwj
  • 浏览: 3307 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

可变Table宽度

cssjava 
阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<style type="text/css">
body {
     font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
     margin: 0px;
scrollbar-face-color:#efefe7;
     scrollbar-highlight-color:#ffffff;
     scrollbar-3dlight-color:#a5a5a5;
     scrollbar-darkshadow-color:#a5a5a5;
     scrollbar-shadow-color:#d6d6ce;
     scrollbar-arrow-color:#003184;
     scrollbar-track-color:#deded6;
}
table {
     font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
          }
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
   onscroll == null?
    (onscroll = function(){
     if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
     var oGridBody = document.getElementById("order_GridBody");
     oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
     event.srcElement.oldScroll == event.srcElement.scrollLeft;
    }):true,
   onmousedown == null?
    (onmousedown = function(){
      if(self.currentTH != null) return;
      var obj = document.elementFromPoint(event.x,event.y);
      var objL = document.elementFromPoint(event.x - 1,event.y);

      if(obj.tagName.toLowerCase() == "th")
      {
    
       if(objL.tagName.toLowerCase() == "th")
       {
        obj = objL;
       }
       if(obj.className == "fixed") return;
       self.currentX = event.x;
       self.currentTH = obj.childNodes[0];
       self.currentTH.setCapture();
      }
    }):true,
   onmouseup == null?
    (onmouseup = function(){
      if(self.currentTH != null)
      {
       self.currentTH.releaseCapture();
       self.currentTH = null;
      }
    }):true,
   onmousemove == null?
    (onmousemove = function(){
      if(self.currentTH != null)
      {
       var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
       if(width < 0) width = 0;
       var dt = parseInt(self.currentTH.style.width) - width;
       self.currentTH.style.width = width;
       __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
       self.currentX = event.x;
      }
    }):true,
   self.__resizeCell == null?
    (self.__resizeCell = function(idx, width){
      var cells = document.getElementById("order_GridBody_Cells");
      var rows = cells.childNodes;
      var i = 0;
      for (var i = 0; i < rows.length; i++)
      {
       var cell = rows[i].childNodes[idx].childNodes[0];
       var resetPattern = /style=[^\s\t\n]+/;
       cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
      }
    }):true
)
}
div.bodyContainer
{
height:400px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                 color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
   ondblclick == null?
    (ondblclick = function()
    {
     var src = event.srcElement;
     if(event.srcElement.tagName.toLowerCase()!="div")
     {
      src = src.childNodes[0];
     }
     src.style.width = "";
     __resizeCell(src.columnIndex,src.clientWidth);
    }):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                 color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
   border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
   border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
   border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
   border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
</style>

<body bgcolor="F6F6F6" style="padding:10 10 10 10">

<div class="tableContainer" id="order_Container">
<!--动态表格-->
<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
<tr>
<td>
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
   <thead>
    <th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
    <th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
    <th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
    <th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
    <th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
    <th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
    <th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
    <th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
    <th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
   </thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr class="odd">
<td colspan="9">
<div id="order_GridBody" class="bodyContainer">
     <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">
<tr class="even">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
            <div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">1.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">32.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="17" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="18" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="19" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="20" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="21" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>

分享到：
| 兼容可变Table宽度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    任意改变table表格td的宽度 支持表格TD拖拽

    5. **边界处理**：为了保持表格的完整性，可能还需要处理相邻td的宽度，避免一个td变宽时挤压或覆盖其他td。 6. **结束拖拽**：当`mouseup`事件触发时，停止对`mousemove`事件的监听，拖拽操作结束。 7. **动画...

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    它由多个table-column定义，每个table-column对应表格的一列，可以设置字段名、标题、宽度等属性。二次封装的过程就是对这些table-column进行扩展，添加新的功能和行为。 在实现自适应列宽的功能时，我们可能会采用...

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...

    jquery拖动的table表格的宽度隐藏表格中的内容

    在这个特定的问题中，我们关注的是如何使用jQuery来实现一个可拖动调整宽度的table表格，并在宽度调整到一定程度时隐藏其中的内容。 首先，我们需要理解HTML中的`&lt;table&gt;`元素，它是用来展示结构化数据的，通常由行...

    table-editor-obsidian,Obsidian表格插件，让你更好的体验笔记工具

    总的来说，“table-editor-obsidian”插件是Obsidian用户不可或缺的工具之一，它增强了Markdown笔记中的表格功能，使你能够更专业、更高效地管理信息。无论是学术研究、项目管理还是日常知识梳理，这款插件都将助你...

    实现boostrap表格td宽度可自由拖动。

    为了实现"bootstrap表格td宽度可自由拖动"的功能，我们需要借助额外的库或者自定义JavaScript代码来实现。在本场景中，我们关注的关键词是"表格td 自由拉伸"，这通常意味着我们需要实现列宽的动态调整。 首先，我们...

    table参数 table参数

    可选值包括 `top`（顶部对齐）、`middle`（居中对齐）和 `bottom`（底部对齐）。`valign="TOP"` 会使得单元格内的内容顶对齐。 7. `background`: 通过 `background="背景图片网址"` 可以给表格添加背景图片。注意，...

    colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo

    colResizable.js 是一个JavaScript插件，专为HTML表格（table）设计，允许用户通过拖动来动态调整表格列的宽度。这个插件适用于那些需要提供用户自定义界面体验的项目，尤其是在处理大量数据并需要用户根据自身需求...

    vue-easytable合并单元格

    Vue Easytable是一款基于Vue.js开发的表格组件，它提供了丰富的功能和良好的易用性，使得在Vue项目中处理表格数据变得更加便捷。在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    左键拖动表头右边框出现垂直于表格内的虚线作为参照，按住鼠标左键可左右移动虚线也会跟着移动，拖动到合适位置松开左键，虚线消失，拖动的表格该列 变宽/变窄 到鼠标位置，最窄为50px，最宽为600px，限制可自行修改...

    利用层的table-row、table-cell属性进行页面布局

    "利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术，尤其在早期的Web开发中广泛使用，尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...

    bootstrap-table-demo

    Bootstrap Table 是一个基于Bootstrap框架的开源JavaScript插件，它为HTML表格提供了丰富的功能，使得在网页上展示数据变得更加灵活和互动。这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例...

    Bootstrap-table分页+汇总统计

    此外，还可以通过设置 `columns` 配置项来自定义表格列的显示，包括列标题、字段名、宽度、可排序性、隐藏等属性。 综上所述，使用 Bootstrap-table 进行分页和汇总统计，能够帮助我们构建功能强大的报表界面，提升...

    JS实现可改变列宽的table实例

    5. 列宽一致性：在mouseup事件中，除了将当前单元格的宽度设置为最终宽度，还需要遍历表格的每一行，将相应列的单元格宽度统一更新为调整后的宽度。 6. 避免快速移动鼠标的问题：通过在全局作用域声明一个变量tTD来...

    bootstrap-table-demo-

    10. **丰富的扩展**：除了基础功能，Bootstrap Table 还有许多可选的扩展插件，如固定列、过滤器、行选择、树形结构等，可以进一步增强表格功能。 在"bootstrap-table-demo"中，你可能找到以下内容： 1. HTML文件...

    bootstrap table组件API

    Bootstrap Table是一款基于...总之，Bootstrap Table组件API为Web开发者提供了一个强大而灵活的工具，使得创建交互式、功能丰富的表格变得轻松简单。通过理解和熟练应用这些API，可以极大地提升Web应用的用户体验。

    bootstrap-table API文档

    4. 自定义列：通过`columns`配置，可以定制列的标题、宽度、对齐方式、可编辑性等。 5. 数据操作：`pagination`分页设置，`sort`排序功能，`filterControl`过滤器控制，允许用户根据需要进行数据筛选。 6. 行操作...

    Table固定指定列进行横向滚动(可拓展)

    标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中，我们有两个关键文件：`Index.html` 和 `Index.js`。`Index.html` 是页面的结构，它包含了一个表格元素，并且可能已经...

    基于bootstrap-table的穿梭框

    Bootstrap Table是一款优秀的前端数据展示框架，它提供了丰富的功能和自定义选项，使得在网页中创建交互式的表格变得简单。在本主题中，我们将探讨如何利用Bootstrap Table实现一个“穿梭框”（Transfer Box）功能，...

    table表头及列固定

    在网页设计中，数据展示是不可或缺的一部分，而`table`元素是HTML中用于展示结构化数据的标准工具。本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户...

Magicbox
Global site tag (gtag.js) - Google Analytics