テーブル td 幅の問題_html/css_WEB-ITnose

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>

テーブルには 4 つの列があり、A と C は幅 100 ピクセルに固定されており、B と D は残りの幅を均等に分割します。この効果を実現するにはどうすればよいですか?

ディスカッションへの返信 (解決策)

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>

テーブルには 4 つの列があり、A と C は幅 100 ピクセルに固定され、B と D は残りの幅を均等に分割します。この効果を実現するにはどうすればよいですか?
オリジナルのポスターの表は固定幅ではありません
幅を固定する根拠は何ですか?

テーブルの幅は画面に 100% 適応されます。

テーブルの幅は画面に 100% 適応されます。

<table  width="100%" >  <tr>    <td width="100px"> A </td>    <td  style="background-color:red" > B </td>    <td width="100px"> C </td>    <td   style="background-color:green"> D </td>  </tr></table>

<table width="100%">  <tr>    <td width="100"> A </td>    <td> B </td>    <td width="100"> C </td>    <td> D </td>  </tr></table>

列 B と D が幅を指定しない場合、それらは均等に分割されることを保証できますか? たとえば、列 D の内容は非常に長いため、新しい行に表示する必要があります。

あなたのは大丈夫ではないですか？枠線を追加することで観察できます
幅が指定されていない場合は、内容に応じて分配されます

B 列と D 列の幅が指定されていない場合、それらは均等に分割されることを保証できますか?列 D の内容は非常に長いため、新しい行に表示する必要があります。

<table  style=" table-layout: fixed;word-break:break-all;word-wrap:break-word;width:100%"  >  <tr>    <td width="100px"> A </td>    <td    > B </td>    <td width="100px"> C </td>    <td  > Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>  </tr></table>

ブラウザが独自に幅を決定しないようにしてください。
一般的なアプローチは、幅を定義せずに td を 1 つだけ残し、残りを定義することです。