Jak utworzyć tabelę HTML w linii

W HTML chcę wyświetlić małą tabelę jako część akapitu. Jednym ze sposobów, aby to zrobić jest to:Jak utworzyć tabelę HTML w linii

<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>

która produkuje ten piękny układ:

 a b 
Before  After 
     c d

która jest dokładnie to, co chcę.

Ale wydaje mi się raczej głupio używać tabeli wewnątrz stołu, kiedy naprawdę chcę użyć tabeli w akapicie. Jednak, gdy próbuję przy użyciu tej 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>

otrzymuję ten brzydki układ:

Before 
a b 
    After 
c d

próbowałam stosując różne różne style wyświetlania, ale żaden nie wydaje się robić to, co chcę.

Czy jestem zmuszony użyć kodu tabeli w tabeli, czy też czegoś brakuje?

Źródło

2011-09-17 oz1cz

co broswer (i wersja) renderuje drugi przykład, jak pokazano? [nie moje =)] – Shad

Firefox 6 i IE 9. – oz1cz

Powinienem wspomnieć, że mój Doctype to XHTML 1.0 Strict. Problem nie pojawia się z HTML 4.01 Transitional. – oz1cz

Dla mnie działa akapit display: inline;. Ale jeśli masz wiele akapitów, po każdym z nich musisz dodać <br />.

Źródło

2011-09-17 19:52:28 Will

Powinienem wspomnieć, że mój Doctype jest XHTML 1.0 Strict. Twoje rozwiązanie działa dobrze (nawet bez
) w XMTHML 1.0 Strict; ale miałem nadzieję, że mogę osiągnąć to, co chcę, bez zmiany stylu otaczającego akapitu. Ale może nie mogę. – oz1cz

Nie sądzę, że możesz, ponieważ akapity nie są domyślnie elementami śródliniowymi. – Will

Przypuszczam, że masz dobry powód, aby użyć tabeli tutaj zamiast css. Możesz uzyskać efekt za pomocą pojedynczej tabeli.

<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>

Źródło

2011-09-17 20:02:42 natedavisolds

To nie zadziała, ponieważ tekst "Przed" i "Po" to w rzeczywistości kilka wierszy tekstu, a mała tabela pojawia się w środku akapitu. – oz1cz

bez problemu. Nie zdawałem sobie sprawy z specyfikacji. Przepraszam. Twoje zdrowie. – natedavisolds

Można użyć następującego CSS:

display:inline-table

onnly IE7 i poniżej nie obsługuje tej właściwości. Prawdopodobnie owinięcie stołu w przęsło z nałożonym na niego zoom:1 może pomóc IE7.

Źródło

2011-09-17 22:01:38

To powinna być preferowana odpowiedź. Nie wymaga żadnego zewnętrznego elementu. – Steven

Używam przeglądarki Chrome na Linuksa i jestem w stanie uzyskać to do pracy poprzez dodanie display:inline-table zarówno do ust (P) i znaczniki tabeli:

<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>

Tylko sprawdzone Firefoksa na Linuksie i wydaje żeby tam też pracować.

FYI: Usunięcie jednego z dwóch stylów display:inline-table dało niepożądane formatowanie.

Źródło

2014-04-18 16:03:38

Jak utworzyć tabelę HTML w linii

Odpowiedz

Powiązane problemy