Table inline display: CSS. Свойство display inline-table.

Leave a Comment / Разное / By /

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

Задавать вопрос

спросил

Изменено 2 года, 10 месяцев назад

Просмотрено 92к раз

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

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

  

 
 
< /таблица>
  После

 Я получаю этот уродливый макет:
 Раньше
а б
    После
CD
 
 Я пробовал использовать разные стили отображения, но ни один из них не дал мне желаемого результата.
 Я вынужден использовать код таблицы в таблице или я что-то упускаю?
  •  HTML
  •  CSS
  •  HTML-таблица
 2
 Вы можете использовать следующий css:
 display:inline-table
 
 только IE7 и более ранние версии не поддерживают это свойство. Возможно, обернув таблицу в диапазон с примененным к ней масштабом :1 , это могло бы помочь IE7.
 1
 Я использую браузер Chrome в Linux, и я могу заставить его работать, добавив  display:inline-table  для тегов абзаца (p) и таблицы:
 

  До
  
аб
 
вг

   
< /таблица>
  После

 Только что проверил Firefox в Linux, похоже, он там тоже работает.
 К вашему сведению: удаление любого из двух стилей  display:inline-table  приводило к нежелательному форматированию.
 Оформление пункта  дисплей: встроенный;  у меня работает. Но если у вас несколько абзацев, вам придется добавить  
  после каждого из них.
 2
 Я полагаю, у вас есть веская причина использовать здесь таблицу вместо css. Вы можете получить эффект, используя одну таблицу.
 <таблица>
  

    <тд>б
    <тд>с
    <тд>д
 
 1
 это не работает, потому что 
аб
 
вг

 

    До
    а
    После
  

  

  


 
 не должен быть потомком 
 
 (вы можете попробовать валидатор W3C, чтобы узнать больше об этой ошибке)
 просто замените 
  с  <дел> 
 Зарегистрируйтесь или войдите 
 Зарегистрироваться через Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 css — создание встроенной HTML-таблицы 
 спросил 
 Изменено
 5 лет, 7 месяцев назад
 Просмотрено
 8к раз
 Я пытаюсь поставить две таблицы рядом:
 <таблица>

<таблица>

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

<таблица>
    
 со следующим CSS:
 .inline {
    контур: 1px сплошной синий;
    ширина: 49%;
    отображение: встроенный блок;
}
 
 Вы также можете использовать встроенную таблицу   , обе дают одинаковые результаты. Если вы не установите ширину, каждая таблица будет определять минимальную ширину, соответствующую содержимому.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  

    
Первая строка таблицы 1

    
Первая строка таблицы 2


Вторая строка таблицы 1

    
Вторая строка таблицы 2