Question

我想设计一个表格，其中包含一个包含文本框和下拉列表的表格。当我添加下拉列表时，表单会失真。我有这些问题： 1）清单是如此之广。我需要使其宽度适合最宽的文本。 2）celss的高度也有所增加。

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>

<body id="body">   

<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Type</th>
</tr>

<tr>
<td><input type="text" id="text-field"></td>

        <td><select name="D1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        </select> </td>
<td><input type="button" class="add" id="submit-button" value="Add Row"></td>
</tr>

</table>
</div>

</body>
</html>

注意：图像中未显示第三列。它包含一个按钮，如代码所示。

Answer 1

问题似乎出现在表格的标题中。第一行有2列，第二行有3列。

要保持对称，请使用以下标准化代码：

<thead> 
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>
            <input type="text" id="text-field">
        </td>

        <td>
            <select name="D1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
            </select> 
        </td>
        <td>
            <input type="button" class="add" id="submit-button" value="Add Row">
        </td>
    </tr>
</tbody>

我所做的是，我添加了标准和HTML表格，并在标题Action中添加了第3列。您可以根据需要重命名。

您还必须检查CSS。它可能会影响您创建的表单！

HHTML表中的下拉列表失真

1 个答案: