我用平移固定表格的列，结果只有文字在平移。这是为什么
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<meta charset="UTF-8">
<title>児童生徒アカウント管理</title>
</head>
<script type="text/javascript" src="../resources/js/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="../resources/css/std_style.css">
<link type="text/css" rel="stylesheet" href="../resources/css/std_menu.css">
<link type="text/css" rel="stylesheet" href="../resources/css/std_parts.css">
<link type="text/css" rel="stylesheet" href="../resources/css/std_layout.css">
<link type="text/css" rel="stylesheet" href="../resources/css/std_conceptcolor.css">
<link rel="stylesheet" href="../resources/css/423.css">
<body>
<div id="header">
<h1 class="pegeTitle">児童生徒アカウント管理</h1>
</div>
<div id="toggle-menu01">
<span></span>
<span></span>
<span></span>
</div>
<div id="headerWrap">
<div id="toolbars">
<div id="menuArea">
<div class="flR">
<p class="name">
<span class="school">【TYPE_A】扶桑中学校</span>
<span class="teacher" title="エデュコムエデュコムエデュコムエデュコム ナビゲーター１２３４５６７８９０１２３４５"
style="font-size: 4.66379px;">エデュコムエデュコムエデュコムエデュコム ナビゲーター１２３４５６７８９０１２３４５</span>
</p>
<p id="logoutArea" onclick="window.c4th.logout('/c4v4');">ログアウト</p>
<p id="headerHelp" class="">
<img src="../resources/img/icon_help.png" data-helpfilename="V4_tsuuchihyou_nyuryoku.pdf" id="help">
</p>
</div>
</div>
<div id="ribbonArea" class="clearfix">
<div class="flL">
<ul>
<li class="iconMenu include_btn">
<span class="btn theme_ok">
<img src="../resources/img/icon_save-w.png">保存内容確認</span>
</li>
<li class="iconMenu">
<span class="txt">
<img src="../resources/img/icon_cancel.png">キャンセル</span>
</li>
</ul>
</div>
</div>
<div class="hidetab"></div>
</div>
</div>
<div class="head_path">
<div class="uploadXlsBreadcrumbs">
<ul>
<li class="breadcrumbsList">
<span class="txt">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">ファイルの取込み</font>
</font>
</span>
</li>
<li class="breadcrumbsList active">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">取り込み内容の確認</font>
</font>
</li>
</ul>
</div>
</div>
<div class="alertMesOuter Presentation">
<div class="l_padding_1em alertMes_center noShadow Mes_warning">
<!-- ヘッダー直下の#alertAreaで使用する場合は default_font も指定します -->
<p class="txt">メッセージエリアテキストが入ります。</p>
</div>
</div>
<div class="main_area">
<div class="main_title">〇〇ゼット名の児量生徒アカウント情報を更新します。以下取込内をこ確認ください。</div>
<div class="main_table">
<div class="table_area">
<table class="student_table">
<thead>
<tr>
<td>取大</td>
<td>行数</td>
<td>生活管理</td>
<td>年级</td>
<td>姓名</td>
<td>编号</td>
<td>密码</td>
<td>任意项目1</td>
<td>任意项目2</td>
<td>任意项目3</td>
<td>任意项目4</td>
<td>任意项目5</td>
<td>任意项目6</td>
<td>任意项目7</td>
<td>任意项目8</td>
<td>任意项目9</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>無</td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td>外</td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>里</td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td></td>
<td>3</td>
<td>20210017</td>
<td>3年A组1番</td>
<td>秋元 恒美</td>
<td>20210001</td>
<td>********</td>
<td>z0001</td>
<td>3A01</td>
<td>abc123</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="interval">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var tableDiv = document.querySelector(".table_area");
var diff = tableDiv.scrollWidth - tableDiv.clientWidth;
var row = document.querySelectorAll(".student_table tr td:nth-child(1),.student_table tr td:nth-child(2),.student_table tr td:nth-child(3),.student_table tr td:nth-child(4),.student_table tr td:nth-child(5)")
var scrollX = 0;
tableDiv.addEventListener("scroll",function(){
if(this.scrollLeft != scrollX){
scrollX = this.scrollLeft;
for(var i =0;i<row.length;i++){
row[i].style.transform = "translateX("+(scrollX)+"px)";
}
}
})
}
</script>
</html>
这是代码，
这是正常的
这是平移之后的，只有文字在平移，但如果我换个背景颜色就是正常的固定效果