theadのthの幅がtbodyの幅に一致しません

Question

私のテーブルの内容を空にして、読み込みを行い、最新のフェッチされたデータを表示したいのですが、問題はtheadにいくつかちらつきの問題があるようですtbodyのデータがなくなると、theadの幅が影響を受けます。

table { 
    border-collapse: collapse; 
} 

table th, 
table td { 
    padding: 5px; 
    border: 1px solid; 
} 

デモ： https://jsfiddle.net/nLrpbz9r/1/

Answer 1

私たちはあなたの問題を解決するだろう、私は設定されたこの2つの属性を推測：

table th, 
table td { 
    padding: 5px; 
    border: 1px solid; 
    width: 200px; 
    text-align: center; 
} 

最後の2行は、それぞれのTD幅の幅を修正（200 pxではなく、責任を支えるためにパーセント値で設定する方がよい）、最後の行はテキストを中央の位置に置くだけです。ボタンを押すと、ヘッダーセルは変更されません。

Answer 2

あなたのCSSにtable th {min-width: 100px;}のようなものを追加してください。

$(function() { 
 
    $('button').click(function() { 
 
    const tb = $('tbody').clone() 
 
    if ($(tb).length > 0) { 
 
     $('tbody').hide() 
 
    } 
 
    }) 
 
})

table { 
 
    border-collapse: collapse; 
 
} 
 

 
table th, 
 
table td { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
} 
 

 
table th {min-width: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>john wesley</td> 
 
     <td>18</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button>Hide tbody</button>

Answer 3

これは正常です... display: none要素は、テーブルの幅の計算に関与していません。あなたは代わりにvisibility: collapseを使用することができます：あなたはTBODYに新しいデータを挿入する際

$(function() { 
 
    $('button').click(function() { 
 

 
    const $tb = $("tbody"); 
 
    const new_visibility = $tb.css("visibility") === "visible" ? "collapse" : "visible"; 
 
    $("tbody").css({ 
 
     "visibility": new_visibility 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button>Toggle tbody</button> 
 

 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>john wesley</td> 
 
     <td>18</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

は残念ながら...、幅はコンテンツに応じて変化します。固定レイアウトテーブルを使用する点を除いて、良い解決策はありません。