残りの幅を取るHTMLテーブル最後に

Question

私は1つのTRと2つのTDを持つテーブルを持っています。私は最初のTDのコンテンツを自動的に幅を調整し、2番目のTDは残りの幅を使い切るようにします。

これは私が持っているものです。

<table style="width: 100%;"> 
 
    <tr> 
 
    <td>short content</td> 
 
    <td>long content</td> 
 
    </tr> 
 
</table>

テーブル全体の幅は（私はそれをしたいと）100％ですが、私はTDの幅を調整する方法がわかりません私の目標を達成する。

Answer 1

最初にtdの幅を小さくすることができます。 white-space: nowrap;

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
} 
 
td:first-child { 
 
    width: 1px; 
 
    white-space: nowrap; 
 
}

<table> 
 
    <tr> 
 
    <td>short content</td> 
 
    <td>long content</td> 
 
    </tr> 
 
</table>

あるいは、最後td大きい幅を与える、例えばとともに1px、 100%。

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
} 
 
td:first-child { 
 
    white-space: nowrap; 
 
} 
 
td:last-child { 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
    <td>short content</td> 
 
    <td>long content</td> 
 
    </tr> 
 
</table>