td Width Not Working - NO CLUEなぜ

なぜこれが私にこのような問題を与えているのかわかりません。私は何百万回も機能するテーブルを作った。全幅テーブルを作ろうとしています。td Width Not Working - NO CLUEなぜ

最初のセルは、他の2つが失敗する領域を占める必要があります。 2番目と3番目のセルはそれぞれ200ピクセルにする必要があります。

目標は、ウィンドウのサイズが変わるとサイズが変わるように、最初のセルに割り当てられた幅を持たないことですが、3つすべてにwidth属性を追加しても（以下のCSSにあります）正しく配置されません。私は100％の幅で表に印を付けたにしても、それはテーブルの右端に詰まっています。

お願いします！

table.topper-table { 
 
\t width: 100%; 
 
} 
 

 
td.topper-table-nav { 
 
\t width: 65%; 
 
\t text-align: left; 
 
} 
 

 
td.topper-table-search { 
 
\t width: 10%; 
 
\t text-align: right; 
 
    \t padding-right: 25px; 
 
} 
 

 
td.topper-table-social { 
 
\t width: 25%; 
 
\t text-align: right; 
 
\t border-left: 1px solid #9db3c4; 
 
\t padding-left: 25px; 
 
}

<table class="topper-table"> 
 
<tr> 
 
<td class="topper-table-nav"> 
 
TEST 
 
</td> 
 
<td class="topper-table-search"> 
 
TEST 2 
 
</td> 
 
<td class="topper-table-social"> 
 
TEST 3 
 
</td> 
 
</tr> 
 
</table>

出典

2016-10-04 Samantha

私はそれを実行したときに、このスニペットのパーセントごとに表示する。その.. –

は割合せずに、以下の私の答えを参照してください。 – Bouke

私は、これはあなたが両方ChromeとFirefoxで、達成しようとするまさにんが、でターゲットとしているコード、だと思います。私はあなたがすでにこのようなものを試したと思います（上記のパーセンテージではありません）。コードをテストして実行して、コンピュータでレンダリングする方法を確認できますか？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table.topper-table { 
 
     width: 100%; 
 
    } 
 
    td.topper-table-nav { 
 
     text-align: left; 
 
     background-color: orange; 
 
    } 
 
    td.topper-table-search { 
 
     width: 200px; 
 
     text-align: right; 
 
     padding-right: 25px; 
 
     background-color: red; 
 
    } 
 
    td.topper-table-social { 
 
     width: 200px; 
 
     text-align: right; 
 
     border-left: 1px solid #9db3c4; 
 
     padding-left: 25px; 
 
     background-color: lime; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <table class="topper-table"> 
 
    <tr> 
 
     <td class="topper-table-nav">TEST 1</td> 
 
     <td class="topper-table-search">TEST 2</td> 
 
     <td class="topper-table-social">TEST 3</td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

出典

2016-10-04 18:13:54 Bouke

@サマンサ、あなたはすでにそれを解決しましたか？ – Bouke

td Width Not Working - NO CLUEなぜ

答えて

関連する問題