Question

我有一个示例html页面，如下所示 enter image description here

但是当我在包含div块和形式的行下方添加一行时，我会遇到第一行的td标签宽度增加的行为，如下图所示

enter image description here

页面的源代码在

下面

    <html>
    <body>
    <div style="left: 100px; position: relative; width: 400px;">
    <table>
        <tr>
            <td><label style="font-size:17px;"> Select the operation:</label>
            </td>
            <td><select style="font-size:15px" property="" id="operation" name="operationSelection" onchange="categorySelector()">
                <option value="addOp"> Addition </option>
                <option value="searchOp"> Search </option>
                <option value="listOp"> List </option>
                <option value="updateOp"> Update </option>
                <option value="deleteOp"> Delete </option>      
            </select></td>                           
        </tr>

        <tr>
            <td>
                <div id="add" style="position: relative; width: 200px;">
                <form name="addForm" action="udm_2.jsp" method="POST">
                <table>
                    <tr>
                    <td>
                        <label style="font-size:17px;"> Select the Gender:</label>
                    </td>       
                    </tr>
                    <tr>
                    <td>
                        <input type="radio" name="addCategory" value="male" checked="checked">Male<br>
                        <input type="radio" name="addCategory" value="female">Female<br>
                    </td>
                    </tr>
                    <tr>
                    <td>
                        <input type="submit"/>
                    </td>
                    </tr>
                </table>
                </form>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

我尝试改变td的宽度但是徒劳无功有人可以解释一下这种行为的原因吗？

Answer 1

这是因为您将width: 200px;设置为div，它是您第二个td元素中第一个tr元素的子元素。

表格单元格（td）的宽度始终与该列中最长的单元格相同。这意味着您的第一个td元素（以及该列中的所有其他元素）的宽度为200px。

要解决此问题，请从div中删除200px宽度，或将选择框移动到与其标签相同的td元素内，如下所示：

<td>
  <label style="font-size:17px;"> Select the operation:</label>
  <select style="font-size:15px" property="" id="operation" name="operationSelection" onchange="categorySelector()">
            <option value="addOp"> Addition </option>
            <option value="searchOp"> Search </option>
            <option value="listOp"> List </option>
            <option value="updateOp"> Update </option>
            <option value="deleteOp"> Delete </option>      
   </select></label>
</td>

如果在这种情况下没有必要使用表格，我建议改用div。如果您确实需要以表格格式显示内容，则使用表格非常棒。如果情况并非如此，那么表格就没有了。

Answer 2

使用HTML table元素进行样式设置被视为不良做法。你应该考虑使用其他元素，例如div。比div更好的是具有语义值的元素。我还建议将CSS放在一个单独的CSS文件中。还要考虑CSS中的em单位，而不是px。

此处您有一个 demo 与div s。

包含div s的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="path/to/your/css/styles.css">
</head>    

<body>    

<div class="wrapper">

  <div>
    <label class="label"> Select the operation:</label>
    <select id="operation" name="operationSelection" onchange="categorySelector()">
      <option value="addOp"> Addition</option>
      <option value="searchOp"> Search</option>
      <option value="listOp"> List</option>
      <option value="updateOp"> Update</option>
      <option value="deleteOp"> Delete</option>
    </select>
  </div>

  <div id="add" class="form-wrapper">
    <form name="addForm" action="udm_2.jsp" method="POST">
      <div class="label"> Select the Gender:</div>
      <div>
        <input type="radio" name="addCategory" value="male" checked="checked" id="male">
        <label for="male">Male</label>
      </div>
      <div>
        <input type="radio" name="addCategory" value="female" id="female">
        <label for="female">Female</label>
      </div>
      <input type="submit" value="send"/>
    </form>
  </div>

</div>


</body>
</html>

styles.css中的CSS：

.wrapper {
  left: 100px;
  position: relative;
  width: 400px;
}

.form-wrapper {
  position: relative;
  width: 200px;
}

.label {
  font-size: 1.1em;
}

select {
  font-size: .9em;
}

添加行时扩展td标记

2 个答案: