css - 表格内文本区域周围的间隙

Question

我已经做了一些研究来消除我在表格中的文本区域周围的差距。根据浏览器的不同，它会出现在顶部(IE、Chrome)或底部(Firefox)。

<table border="0">
    <tr>
         <form method="POST" action="updatereview.php">
              <td class="shrink">
                  text
              </td>
              <td class="shrink">
                   <select name='update_score'>
                       <option  value="1">1</option>
                       <option  value="2">2</option>
                       <option  value="3">3</option>
                   </select>
                   <input type="textbox" name="new_retailer">
              </td>
              <td class="one-long-line">
                   <div id="content" style="width:100%;">
                       <textarea name="review_comment" rows="10" style="resize:none;">some text here</textarea>
                   </div>                   
              </td>
         </form>          
     </tr>
</table>

我没有在这里包含我所有的 CSS，因为它有很多，但我已经把它全部放在一个 jsfiddle 中:https://jsfiddle.net/9xmx2dex/1/ textarea 的 CSS 就在最后。

经过一些研究，添加“vertical-align: top;”我的 CSS 应该可以解决这个问题，但无济于事。感谢任何帮助，谢谢。

Answer 1

在你的 table tr:nth-child(odd) td 规则改变 vertical-align: text-top; 到 vertical-align: top;

jsFiddle example