Question

我有一个简单的桌子，伸展到身体的整个宽度。我已尝试将边距和填充设置为0，并在适当的位置设置宽度= 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

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

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并检查表格行拉伸的全宽：

.myTable  tr
{
    background: green;
}

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

2 个答案: