it-swarm.com.ru

Как сделать HTML-таблицу встроенной

В HTML я хочу отобразить небольшую таблицу как часть абзаца. Один из способов сделать это заключается в следующем:

<table>
  <tr>
    <td>
      Before 
      <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
      After
    </td>
  </tr>
</table>

который производит этот хороший макет:

       a b
Before     After
       c d

это именно то, что я хочу.

Но мне кажется довольно глупым использовать таблицу внутри таблицы, когда я действительно хочу использовать таблицу внутри абзаца. Однако, если я попытаюсь использовать этот HTML:

<p>
  Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

Я получаю этот уродливый макет:

Before
a b
    After
c d

Я пытался использовать различные стили отображения, но ни один из них не делает то, что я хочу.

Я вынужден использовать код «таблица в таблице» или я что-то упустил?

16
oz1cz

Создание абзаца display: inline; работает для меня. Но если у вас есть несколько абзацев, вам нужно будет добавить <br /> после каждого из них.

3
Will

Вы можете использовать следующий CSS:

display:inline-table

только IE7 и ниже не поддерживают это свойство. Возможно, завершение таблицы в промежуток с примененным к ней zoom:1 может помочь IE7.

25
Spadar Shut

Я использую браузер Chrome в Linux, и я могу заставить его работать, добавив display:inline-table в теги параграфа (p) и таблицы:

<p style="display:inline-table;">
  Before
  <table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

Только что проверил Firefox на Linux и, похоже, там тоже работает.

К вашему сведению: удаление любого из двух стилей display:inline-table привело к нежелательному форматированию.

2
Doctor Jonesington

Я полагаю, что у вас есть веская причина использовать здесь таблицу вместо CSS. Вы можете получить эффект, используя одну таблицу.

<table>
  <tr>
    <td rowspan="2">Before</td>
    <td>a</td>
    <td>b</td>
    <td rowspan="2">After</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>
0
natedavisolds