桌子没有伸出到封闭体的整个宽度

Question

I have a simple table that doesn't stretch out to the full width of the body. 我有一个简单的桌子，它不能伸展到身体的整个宽度。 I've tried setting margins and padding to 0 everywhere, and setting width=100% where appropriate. 我尝试在所有位置将边距和填充设置为0，并在适当的地方设置width = 100％。

Here is the HTML/CSS in jsfiddle: http://jsfiddle.net/fbCgk/ 这是jsfiddle中的HTML / CSS： http : //jsfiddle.net/fbCgk/

HTML: 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: 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;
}

I tried referring to what was posted here: Table Row Not Expanding To Full Width , but testing out the different properties (including position: relative) didn't fix the issue. 我尝试参考此处发布的内容：表行未扩展为全宽，但是测试了不同的属性（包括位置：相对）并不能解决问题。 What am I missing? 我想念什么？

Answer 1

Try this. 尝试这个。 You forgot to add td inside tr and for inline form you have to add - 您忘记在tr内添加td ，而对于内联表单则必须添加-

display: inline-block;

for form id #myForm 对于表单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

Add this to your css and check table row streched for full width: 将此添加到您的css并检查已拉伸的表行的完整宽度：

.myTable  tr
{
    background: green;
}

桌子没有伸出到封闭体的整个宽度

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-03-08 03:48:36

解决方案2
0 2015-03-08 04:00:52

桌子没有伸出到封闭体的整个宽度

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-03-08 03:48:36

解决方案2 0 2015-03-08 04:00:52

解决方案1
0 已采纳 2015-03-08 03:48:36

解决方案2
0 2015-03-08 04:00:52