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 列具有相同的宽度，但在这种情况下，我的第一列非常大，另外两列很小。我怎样才能解决这个问题？

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

尝试使用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;
}

Answer 3

您的 CSS 选择器不正确。空间推断后代

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

应该

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