如何减少具有表单的行的大小？答案

【问题标题】：How to reduce the size of rows having a form?如何减少具有表单的行的大小？
【发布时间】：2013-05-26 16:39:58
【问题描述】：

具有 html 表单的行的大小大于没有 .如何将具有表格的行（第 1 行和第 2 行）的大小减小到与没有表格的行（第 3 行和第 4 行）的大小相同。有表单标签的行的大小几乎是没有表单标签的行的两倍。

注意：在普通网页上的 chrome 和 forefox 中会出现此问题。不知何故，在 jsfiddle.net 中没有看到这个问题。

源代码：

<html>
<body>
  <table border="1" cellspacing="0">
    <tr>
      <th>one</th> <th>two</th> <th>three</th>
    </tr>

    <tr>
      <td>10</td> <td>10</td>
      <td><form action="testb.pl" method="POST" target="_blank"><input type="submit" value="CPU"></form></td>
    </tr>

    <tr>
      <td>20</td> <td>20</td>
      <td><form action="testb.pl" method="POST" target="_blank"><input type="submit" value="CPU"></form></td>
    </tr>

    <tr>
      <td>3</td> <td>4</td> <td>5</td>
    </tr>

    <tr>
      <td>6</td> <td>7</td> <td>8</td>
    </tr>
  </table>
</body>
</html>

【问题讨论】：

在每个标签上
是行还是列？因为行大小（或高度）实际上是相同的。见这里jsfiddle.net/Ev7P5
顺便问一下为什么你有很多表行结束标记（即而不是一对打开和关闭标记，即？
问题已修复。在 chrome 和 forefox 中查看时，此代码不会对所有行显示相同的大小。但它在 jsfiddle.net 中运行良好。

【解决方案1】：

试试这个：

<html>

<body>
    <table border="1" cellspacing="0">
    <tr>
        <th width="33%">one</th> <th width="33%">two</th> <th width="33%">three</th>
    </tr>
    <tr>
        <td>10</td> <td>10</td>
        <td><form action="testb.pl" method="POST" target="_blank"><input type="submit" value="CPU">    </form></td>
    </tr>

    <tr>
        <td>20</td> <td>20</td>
        <td><form action="testb.pl" method="POST" target="_blank"><input type="submit" value="CPU"></form></td>
    </tr>

    <tr> <td>3</td> <td>4</td> <td>5</td> </tr>
    <tr> <td>6</td> <td>7</td> <td>8</td> </tr>
    </table>
</body>
</html>

【讨论】：

我改变了答案。试试吧。实际上你没有正确构建表格标签
我已经修复了问题中的和标签问题。它仍然无法在 chrome 和 firefox 中使用。在 jsfiddle 中测试时显示正常。
嗯，奇怪。如果它在 jsfiddle 中工作，而不是在本地，则本地的东西不好。
我希望行大小是相同的顺序 - 所以不需要添加 33%。查看行大小的差异 - cssdesk.com/zbPjp
width=33% 不会改变行顺序。没有它，宽度=自动是正常的。所以你必须以某种方式设置行宽。如果你想相等，你应该给它们相等的宽度。在这种情况下，分辨率为 33%。

【解决方案2】：

换行

<td><form action="testb.pl" method="POST" target="_blank"><input type="submit" value="CPU"</form></td>

到

<form action="testb.pl" method="POST" target="_blank"><td><input type="submit" value="CPU"></td></form>

这现在在 chrome 和 firefox 中运行良好。

请查看此链接：http://cssdesk.com/zbPjp

【讨论】：

【解决方案3】：

如果是行高，您可以为表格行创建一个 css 类，例如：

table.equalheight tr {
line-height:30px;

}

这是demo

【讨论】：

该代码在 jsfiddle 站点中运行良好但是在普通网页上的 chrome/firefox 中看到相同的 html 时不起作用。有
的行的大小是没有

标签的行的两倍。