HTML表格内的扭曲下拉列表

Question

我想设计一个表单，该表单包含一个具有文本框和下拉列表的表。当我添加下拉列表时，表单会变形。我有这些问题：1）列表是如此广泛。我需要使其宽度适合最宽的文字。2）单元的高度也有所增加。

<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>

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

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中添加了第三列。您可以根据需要对其进行重命名。

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

HTML表格内的扭曲下拉列表

问题描述投票：0回答：1

1个回答

最新问题

HTML表格内的扭曲下拉列表

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1