jqeuryでtheadとtbodyのサイズを合わせるプログラム

html
1<thead>
2                        <tr>
3                            <td class="th_td1" id="TR_TARGET">顧客No</td>
4                            <td class="th_td1">名前</td>
5                            <td class="th_td1">担当スタッフ</td>
6                            <td class="th_td1">電話番号</td>
7                            <td class="th_td1">前回来日</td>
8                            <td class="th_td1">来店回数</td>
9                        </tr>
10                    </thead>
11                    <tbody>
12                        <tr>
13                            <td class="td_td1">顧客No</td>
14                            <td class="td_td1">名前</td>
15                            <td class="td_td1">担当スタッフ</td>
16                            <td class="td_td1">電話番号</td>
17                            <td class="td_td1">前回来日</td>
18                            <td class="td_td1">来店回数</td>
19                        </tr>
20                        <?php
21                        
22                        require "php/road_all_Consumer.php";
23                        
24                        ?>
25                        
26                    </tbody>

javascript
1$(document).ready(function(){
2    
3    var Size = "";
4    
5    for (i = 0;i <= 5;i++){
6        
7        //サイズを測る
8        Size = $(".td_td1").eq(i).outerWidth();
9        
10        //サイズを作る
11        
12        //合わせる
13        $(".th_td1").eq(i).css({
14            width:Size
15        })
16        
17    }
18    
19    
20})

サイズを測って、そのままｃｓｓを変更しているのですが、
サイズが変わった状態で変更されてしまいます。
例）
.td_td1 → 50px
このまま、.th_td1にcssを張り付ける
結果
.th_td1 → 86px

という風に、値が変わってしまします。
どうすればいいのでしょうか

行動規範の内容に同意します

回答1件

変数Sizeで取得した値とは違う値がtd_td1クラスのwidthに設定されてしまう、という質問だと読みました。こちらではそのような現象は再現できませんでした。他の部分が関係していないか、確認する値を間違えていないかなどもう一度見直してみていただけませんか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        table, tr, td {
8            border: 1px solid black;
9        }
10    </style>
11</head>
12<body>
13<table>
14    <thead>
15    <tr>
16        <td class="th_td1" id="TR_TARGET">顧客No</td>
17        <td class="th_td1">名前</td>
18        <td class="th_td1">担当スタッフ</td>
19        <td class="th_td1">電話番号</td>
20        <td class="th_td1">前回来日</td>
21        <td class="th_td1">来店回数</td>
22    </tr>
23    </thead>
24    <tbody>
25    <tr>
26        <td class="td_td1">顧客No</td>
27        <td class="td_td1">名前</td>
28        <td class="td_td1">担当スタッフ</td>
29        <td class="td_td1">電話番号</td>
30        <td class="td_td1">前回来日</td>
31        <td class="td_td1">来店回数</td>
32    </tr>
33    </tbody>
34</table>
35<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
36<script>
37    $(document).ready(function () {
38        var Size = "";
39        for (i = 0; i <= 5; i++) {
40            //サイズを測る
41            Size = $(".td_td1").eq(i).outerWidth();
42            //サイズを作る
43
44            console.log(Size);
45
46            //合わせる
47            $(".th_td1").eq(i).css({
48                width: Size
49            });
50        }
51    });
52</script>
53</body>
54</html>

コンソールに出力されたSizeの値

GET 
https://code.jquery.com/jquery-3.2.1.min.js [HTTP/2.0 304 Not Modified 134ms]
54  index.html:44:13
36  index.html:44:13
87  index.html:44:13
68  index.html:44:13

サイズ変更後のHTML(table部分のみ書抜き)

HTML
1<table>
2    <thead>
3    <tr>
4        <td class="th_td1" id="TR_TARGET" style="width: 54px;">顧客No</td>
5        <td class="th_td1" style="width: 36px;">名前</td>
6        <td class="th_td1" style="width: 87px;">担当スタッフ</td>
7        <td class="th_td1" style="width: 68px;">電話番号</td>
8        <td class="th_td1" style="width: 68px;">前回来日</td>
9        <td class="th_td1" style="width: 68px;">来店回数</td>
10    </tr>
11    </thead>
12    <tbody>
13    <tr>
14        <td class="td_td1">顧客No</td>
15        <td class="td_td1">名前</td>
16        <td class="td_td1">担当スタッフ</td>
17        <td class="td_td1">電話番号</td>
18        <td class="td_td1">前回来日</td>
19        <td class="td_td1">来店回数</td>
20    </tr>
21    </tbody>
22</table>