Ширина таблицы занимает 100% страницы, и мне нужна таблица в той же строке с другими элементами - PullRequest
1 голос
/ 26 января 2011

Я не могу преодолеть то, что кажется простой проблемой форматирования CSS в Chrome: я хочу поместить таблицу вправо, а метку и некоторые кнопки влево, внутри того же абзаца.Это работает достаточно просто в других браузерах (Firefox, IE7 и 8), но в Chrome таблица растягивается по всей странице под меткой.

HTML:

<div class="formrow">
  <label> </label>
  <div style="display: inline; width: 208px; ">
    <table id="tbl_Index" class="grid" style="display: inline; width: 208px; table-layout: fixed;">
        <thead>
            <tr class="">
                <th style="width: 50px;"></th>
                <th style="width: 150px;" class=""></th>
            </tr>
        </thead>
        <tbody>
            <tr id="1" class="">
                <td style="width: 50px;"></td>
                <td style="width: 150px;"></td>
            </tr>
            <!-- etc... -->
        </tbody>
    </table>
  </div>
</div>

Дело в том,Я попробовал почти любой трюк, который я нашел, чтобы ограничить таблицу 200px:

  • Я попытался назначить table-layout: fixed, что, в сочетании с width, должно было ограничить мою таблицу до 208px;
  • Я попытался обернуть таблицу в div и установить ее в строке, чтобы ограничить таблицу таким образом
  • Я попытался стилизовать сетку с помощью display: inline; и затем установить max-width: 208px; (выможет знать, что max-width относится только к inline или блоку, и таблица не относится ни к одному из них.)

Что меня действительно раздражает, так это то, что если я иду в консоль и пытаюсь получить ширину длятаблица, это делает Скажи мне 208;но когда я смотрю в скомпилированных свойствах таблицы, она отображает 0px;

Ответы [ 2 ]

1 голос
/ 26 января 2011

Добавьте к стилю таблицы: float:right; и вы хотите использовать inline-block, а не inline, это должно сработать

0 голосов
/ 29 января 2011

Вы можете попробовать использовать этот CSS выше:

div.formrow { clear:left; }
div.formrow label { float:left; }
div.formrow tabel { width:208px; border-collapse:collapse; display:inline-block; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...