jquery - 表格列宽未根据内容大小调整

标签 jquery html css

我在我的表格中添加了水平和垂直滚动条，当我垂直滚动时我卡住了线程元素并且我卡住了 tbody 元素最多四列，但是如果特定的 td 内容，表格列宽不会调整到内容大小值很长。需要您的帮助来解决此问题。

Click to View the Image In image i tried to increase the content length "WorchestershireWorchestershire" but the header is collapsed not adjusting to the content width

https://codepen.io/anon/pen/varLaG 

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Town</th>
    <th>County</th>
    <th>Age</th>
    <th>Profession</th>
    <th>Anual Income</th>
    <th>Matital Status</th>
    <th>Children</th>
    <th>Anual Income</th>
    <th>Matital Status</th>
    <th>Children</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John Smith</td>
    <td>Macelsfield</td>
    <td>Cheshire</td>
    <td>52</td>
    <td>Brewer</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Jenny Jones</td>
    <td>Threlkeld</td>
    <td>Cumbria</td>
    <td>34</td>
    <td>Shepherdess</td>
    <td>£28,000</td>
    <td>Single</td>
    <td>0</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Peter Frampton</td>
    <td>Avebury</td>
    <td>Wiltshire</td>
    <td>57</td>
    <td>Musician</td>
    <td>£124,000</td>
    <td>Married</td>
    <td>4</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Simon King</td>
    <td>Malvern</td>
    <td>Worchestershire</td>
    <td>48</td>
    <td>Naturalist</td>
    <td>£65,000</td>
    <td>Married</td>
    <td>2</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Lucy Diamond</td>
    <td>St Albans</td>
    <td>Hertfordshire</td>
    <td>67</td>
    <td>Pharmasist</td>
    <td>Retired</td>
    <td>Married</td>
    <td>3</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Austin Stevenson</td>
    <td>Edinburgh</td>
    <td>Lothian </td>
    <td>36</td>
    <td>Vigilante</td>
    <td>£86,000</td>
    <td>Single</td>
    <td>Unknown</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Wilma Rubble</td>
    <td>Bedford</td>
    <td>Bedfordshire</td>
    <td>43</td>
    <td>Housewife</td>
    <td>N/A</td>
    <td>Married</td>
    <td>1</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Kat Dibble</td>
    <td>Manhattan</td>
    <td>New York</td>
    <td>55</td>
    <td>Policewoman</td>
    <td>$36,000</td>
    <td>Single</td>
    <td>1</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Henry Bolingbroke</td>
    <td>Bolingbroke</td>
    <td>Lincolnshire</td>
    <td>45</td>
    <td>Landowner</td>
    <td>Lots</td>
    <td>Married</td>
    <td>6</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Alan Brisingamen</td>
    <td>Alderley</td>
    <td>Cheshire</td>
    <td>352</td>
    <td>Arcanist</td>
    <td>A pile of gems</td>
    <td>Single</td>
    <td>0</td>
    <td>£47,000</td>
    <td>Married</td>
    <td>2</td>
  </tr>
</tbody>

/***************HTML结束*****************/

table {
    position: relative;
    table-layout: auto;
    background-color: #aaa;
    overflow: hidden;
    border-collapse: collapse;
    display:block;
    width: 100%;
  }



  thead {
     position: relative;
     display: block; 
     overflow: visible;
   }

   thead th {
      background-color: #99a;
      min-width: 120px;
      height: 32px;
      border: 1px solid #222;
   }

   thead th:nth-child(1) {
      position: relative;
      background-color: #88b;
   }

   thead th:nth-child(2) {
       position: relative;
       background-color: #88b;
   }

   thead th:nth-child(3) {
         position: relative;
         background-color: #88b;
   }

   thead th:nth-child(4) {
         position: relative;
         background-color: #88b;
   }


   tbody {
        position: relative;
        display: block; 
        height: 239px;
        overflow: scroll;
      }

   tbody td {
       background-color: #bbc;
       min-width: 120px;
       border: 1px solid #222;
   }

   tbody tr td:nth-child(1) {  
        position: relative;
        height: 40px;
        background-color: #99a;
   }

   tbody tr td:nth-child(2) {  
      position: relative;
      height: 40px;
      background-color: #99a;
   }

   tbody tr td:nth-child(3) {  
         position: relative;
         height: 40px;
         background-color: #99a;
   }

   tbody tr td:nth-child(4) {  
         position: relative;
         height: 40px;
         background-color: #99a;
   }

/************************CSS 结束********************* *************/

   $(document).ready(function() {
       $('tbody').scroll(function(e) { 

        $('thead').css("left", 
       -$("tbody").scrollLeft()); 
       $('thead th:nth- 
         child(1)').css("left", 
        $("tbody").scrollLeft()); 
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); 
$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); 
$('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); 
$('thead th:nth-child(3)').css("left", $("tbody").scrollLeft()); 
 $('tbody td:nth-child(3)').css("left", $("tbody").scrollLeft()); 
 $('thead th:nth-child(4)').css("left", $("tbody").scrollLeft()); 
 $('tbody td:nth-child(4)').css("left", $("tbody").scrollLeft()); 
});
});

最佳答案 

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
	$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second cell of the header
    $('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second column of tdbody
	$('thead th:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
	 $('tbody td:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
	 $('thead th:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
	 $('tbody td:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
	
    
  });
});
table {
  position: relative;
  table-layout: auto;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
  display:block;
  width: 100%;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
  max-width:120px;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(2) {/*second cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(3) {/*third cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(4) {/*third cell in the header*/
  position: relative;
  background-color: #88b;
}

/*tbody*/
tbody {
  position: relative;
  display: block; /*seperates the tbody from the header*/
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
  max-width:120px;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(2) {  /*the second cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(3) {  /*the third cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(4) {  /*the third cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
		<th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire Wor chester shire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian </td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
  </body>
</html>

试试这个代码...

更新后的CSS样式如下

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
  max-width:120px;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
  max-width:120px;
}

关于jquery - 表格列宽未根据内容大小调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51671254/

上一篇：javascript - 加载特定图像，然后加载整个页面

下一篇：javascript - 将特定属性添加到 div 中的 anchor 标记

相关文章：

javascript - View 未使用 require.js 文本呈现!插入

javascript - 隐藏当前选择菜单，并在其上方显示隐藏的输入

javascript - HTML 背景滚动效果

html - 如何强制文本在下一行中断？

javascript - JQuery - 无法识别动态元素

javascript - Jquery启用/禁用按钮文本区域验证

javascript - jQuery-ui 对话框不显示点击事件

javascript - 如何在一页中加载两个 Google 折线图？

javascript - ngf-max-size $digest() 与 angular.js 中的 ng-file-upload 错误

css - Bootstrap 问题 div 扩展到 span 之外

©2024 IT工具网  联系我们