Стол не растягивается на всю ширину ограждающего корпуса

У меня есть простой стол, который не растягивается на всю ширину тела. Я попытался установить поля и отступы на 0 везде, и установить ширину =100%, где это уместно.

Вот HTML/CSS в jsfiddle: 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;
}

Я попытался сослаться на то, что было опубликовано здесь: Строка таблицы не расширяется до полной ширины, но тестирование различных свойств (включая положение: относительное) не устранило проблему. Что мне не хватает?

Источник

2 ответа

Решение

Попробуй это. Вы забыли добавить td внутри trи для встроенной формы вы должны добавить -

display: inline-block;

для идентификатора формы #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;
}
Источник

Добавьте это к вашему CSS и проверьте растянутую строку таблицы на полную ширину:

.myTable  tr
{
    background: green;
}
Источник
Другие вопросы по тегам