相关疑难解决方法(0)

我有以下CSS和HTML片段正在呈现.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

问题是文本区域最终比父级宽8px(边框为2px,填充为6px).有没有办法继续使用边框和填充,但约束textarea父的宽度的总大小？

这是现场演示

我试图在td中放入一个填充文本输入,我希望它占据宽度的100%,但它超出了td.我不明白为什么会这样,有人知道吗？

CSS

  table{
    border: solid 1px gray;
    width: 90%;
  }
  input{ width: 100%; padding:10px; }

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>