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。请改用一个班级。 15年前还使用了FONT标签。

此外，您不应该为此布局使用表格，因为表格仅适用于表格日期。

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

table td width和float

3 个答案: