Table 没有伸展到封闭的整个宽度 body

Question

我有一个简单的 table，它不会伸展到 body 的整个宽度。我试过将边距和填充设置为 0，并在适当的地方设置 width=100%。

这是 jsfiddle 中的 HTML/CSS：http://jsfiddle.net/fbCgk/

HTML:

<body>
    <table class="myTable">
        <tr>
            <button type='submit' id="button1">Button1</button>
            <button type='submit' id="button2">Button2</button>
            <form id="myForm">
                <input id="userInput" type="text"/>
            </form>
       </tr>
    </table>
</body>

CSS:

.myTable {
  margin: 0px;
  width: 100%;
}

button {
  margin: 5px; 
}

form {
  margin: 5px;
}

.myTable {
  background-color: red;
  margin: 0;
  padding: 0;
  width: 100%;
}

.controls tr td {
  margin: 0;
  padding: 0;
}

我尝试参考此处发布的内容：Table Row Not Expanding To Full Width，但测试不同的属性（包括位置：相对）并没有解决问题。我错过了什么？

Answer 1

试试这个。您忘记在 tr 中添加 td 对于内联表单，您必须添加 -

display: inline-block;

表单 ID #myForm

<body>
     <table class="myTable">
          <tr>
                <td>
                    <button type='submit' id="button1">Button1</button>
                    <button type='submit' id="button2">Button2</button>
                    <form id="myForm">
                        <input id="userInput" type="text"/>
                    </form>
                </td>
          </tr>
      </table>
</body>


.myTable {
    margin: 0px;
    width: 100%;
    background: red;
}

button {
    margin: 5px; 
}

form {
    margin: 5px;
}

.myTable {
    background-color: red;
    margin: 0;
    padding: 0;
    width: 100%;
}

.controls tr td {
    margin: 0;
    padding: 0;
}

#myForm{
    display: inline-block;
}

Answer 2

将此添加到您的 css 并检查 table 行拉伸为全宽：

.myTable  tr
{
    background: green;
}

Table 没有伸展到封闭的整个宽度 body

Table not stretching out to the full width of the enclosing body

html

css

html-table

stretch