html - テーブル td 幅とフロート

Question

こんばんは！私はこのことをやっています：

<div id="infoGen" align="center">
    <table id="tabInfoGen">
        <tr>
            <td id="primacol">Nome:&nbsp;<font id="h3"><%=u.getNome()%></font><br>
                Cognome:&nbsp; <font id="h3"><%=u.getCognome()%></font><br>
                Indirizzo:&nbsp; <font id="h3"><%=u.getIndirizzo()%></font><br>
                Città:&nbsp;<font id="h3"><%=u.getCitta()%></font>
            </td>
            <td id="secondacol">Data di Nascita:&nbsp; <font
                id="h3"><%=u.getDataNascita()%></font><br> Luogo di
                Nascita:&nbsp;<font id="h3"> <%=u.getLuogoDiNascita()%></font><br>
                Telefono:&nbsp;<font id="h3"> <%=u.getTelefono()%></font><br>
                Email:&nbsp; <font id="h3"><%=u.getEmail()%></font>
            </td>
            <td id="terzacol">Username:&nbsp; <font id="h3"><%=u.getUsername()%></font>
                <br> Password:&nbsp; <font id="h3"> <%
for (int i = 0; i < u.getPassword().length(); i++)
    out.print("*");
  %>
                </font>
            </td>
        </tr>
    </table>
</div>

このCSSで

#infoGen {
background-color: #F2F5A9;
width: 800px;
border-radius: 20px;
border: 1px solid black;
}

 #infoGen table {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
font: 16px Impact, sans-serif;
text-align: left;
 }
 td #primacol {
float: left;
margin-left: 50px;
width: 200px;
}

td #secondacol {
width: 200px;
float: left;
margin-left: 20px;
}

td #terzacol {
float: left;
margin-left: 50px;
width: 200px;
}

問題は、同じ幅の 3 つの列が必要なことですが、この場合、最初の列が非常に大きく、他の 2 つは小さいです。どうすればこれを修正できますか?

http://jsfiddle.net/

Answer 1

次のような CSS ルールがあります。

td #primacol {
    float: left;
    margin-left: 50px;
    max-width: 200px;
}

次のようになります。

td#primacol {
    float: left;
    margin-left: 50px;
    max-width: 200px;
}

TD と ID の間のスペースが削除されていることに注意してください。

関連はありませんが、同じ ID を複数持つことはできません。代わりにクラスを使用してください。また、FONTタグを使用するのは15年ほど前のことです。

さらに、テーブルは表形式の日付のみを対象としているため、このレイアウトにテーブルを使用しないでください。

Answer 2

CSS セレクターが正しくありません。スペースは子孫を推測します

/* look for id=secondacol within any TD*/
td #secondacol

する必要があります

/* TD that has ID=secondacol*/
td#secondacol

Answer 3

使ってみてくださいmax-width:

td#primacol {
    margin-left: 50px;
    max-width: 200px;
}

td#secondacol {
    max-width: 200px;
    margin-left: 20px;
}

td#terzacol {
    margin-left: 50px;
    max-width: 200px;
}