HTML 元素填充其表格单元格的宽度，但周围有少量且一致的填充答案

【问题标题】：HTML elements to fill the widths of their table cells, but with a small & consistent bit of padding aroundHTML 元素填充其表格单元格的宽度，但周围有少量且一致的填充
【发布时间】：2014-05-18 18:39:49
【问题描述】：

回答了我自己的问题。答案如下：

table, th, td  { border:1px solid black; padding-left:4px; padding-right:4px; }
input[type="text"], button, select
               { width: 100%;
                 -webkit-box-sizing: border-box;
                 -moz-box-sizing:    border-box;
                 box-sizing:         border-box; }

在我的网页（下面的源代码）中，有几个元素没有填满表格单元格的宽度：输入文本字段、成绩选择和插入按钮。我想要的结果是 我希望每个都填充其表格单元格的宽度，但在它周围有一点填充，就像删除按钮在它周围一样。

我尝试了各种 CSS 样式组合，包括“width:100%”、“padding:2px”等。但是，我一直无法获得组合以产生所需的结果。有谁知道我怎样才能达到我想要的结果？

我使用的是 Chrome 版本 33.0.1750.154 m，我的 HTML 源代码是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Presidential Grade</title>
    <style>
      table, th, td  { border:1px solid black; }
      fieldset       { border-style:solid; border-color:red; display:inline-block; }
      legend         { font-style:italic; text-align:center; font-weight:bold; }
      select         { font-family:"Lucida Console", Monaco, monospace; }
    </style>
  </head>
  <body>
    <form>
      <div>
        <fieldset>
          <legend>&nbsp;Presidential Grade&nbsp;</legend>
          <table>
            <tr>
              <th>Action</th>
              <th>
                &nbsp;Last Name<span style='color:green;'>&nbsp;&utrif;&nbsp;</span>
              </th>
              <th>&nbsp;First Name&nbsp;</th>
              <th>
                &nbsp;Grade<span style='color:green;'>&nbsp;&utrif;&nbsp;</span>&nbsp;</th>
            </tr>
            <tr>
              <td><button>Delete</button></td>
              <td>
                <input type='text' maxlength='20' size='7' value='Adams'>
              </td>
              <td>
                <input type='text' maxlength='20' size='7' value='John'>
              </td>
              <td>
                <select>
                  <option value='A'>A</option>
                  <option value='B'>B</option>
                  <option value='C'>C</option>
                  <option value='D'>D</option>
                </select>
              </td>
            </tr>
            <tr style='background-color:#D0FFD0;'>
              <td><button>Insert</button></td>
              <td style='display:none;'></td>
              <td>
                <input type='text' style='color:DarkBlue;' maxlength='20' size='7'>
              </td>
              <td>
                <input type='text' style='color:DarkBlue;' maxlength='20' size='7'>
              </td>
              <td>
                <select>
                  <option value='A'>A</option>
                  <option value='B'>B</option>
                  <option value='C'>C</option>
                  <option value='D'>D</option>
                </select>
              </td>
            </tr>
          </table>
        </fieldset>
      </div>
    </form>
  </body>
</html>

【问题讨论】：

标签： html css width margin padding

【解决方案1】：

作为 TD 的直接子元素的任何元素，使其宽度为 100%：

td > * {width: 100%;}

并添加一些填充：

td {padding: 8px;}

http://jsfiddle.net/6nBG8/

【讨论】：

我已经尝试过你的建议，很抱歉，但我觉得还是不太合适。
您希望元素扩展并具有填充。他们在示例中这样做。我猜你的要求不正确。