Eliminowanie luki między pionowymi granicami tabeli <td> s

Mam CV, które próbuję przetłumaczyć z MS Worda na HTML i CSS dla łatwiejszej konserwacji i udostępniania. Podoba mi się styl CV i wolałbym go zachować. Ma lewą kolumnę z tytułami takimi jak "Edukacja", "Doświadczenie" itp. Pogrubioną czcionką i wyrównaną do prawej względem pionowego separatora.Eliminowanie luki między pionowymi granicami tabeli <td> s

W Słowach osiąga się to za pomocą tabeli, ze stylem obramowania środkowego ustawionego na stałe, a pozostałe obramowania jako puste. Dzięki temu tytuły sekcji mogą być wyrównane pionowo z powiązaną zawartością.

Próbowałem po prostu powielać tę technikę, ale w Firefoksie i Chrome, jeśli ustawię kolumnę tds 'border-right atrybuty na stałe, istnieją luki w pionowych podziałach tabeli. Ten rodzaj rujnuje efekt.

Pomyślałem o użyciu dwóch elementów div, jednego z nagłówkami i jednego z zawartością, ale innych niż twarde punkty kodowania pikseli (które ma swoje własne oczywiste zestawy problemów), nie mogę wymyślić, jak je zachować pionowa synchronizacja.

Czy istnieje sposób na to, bez utraty możliwości zachowania tytułów i powiązanych z nimi treści w pionie?

kod tabela wygląda coś

<table> 
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr> 
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr> 
. 
. 
. 
</table>

Źródło

2012-02-25 Ben Weinstein-Raun

Proszę wyjaśnić, co rozumiecie przez "luki w pionowych podziałach stołu", i proszę napisać jakiś kod. –

Czy możesz dodać zrzut ekranu lub cokolwiek innego, abyśmy mogli zobaczyć dokładnie to, co chcesz? –

Czy możesz podzielić się jakimś kodem tego, co dotychczas próbowałeś, i być może obrazem tego, co próbujesz osiągnąć. To by bardzo pomogło. Możesz udostępnić kod np. Za pomocą [JSFiddle] (http://jsfiddle.net). –

pójdę z:

table { border-collapse: collapse; }

byłoby wyeliminować luki i pozwoli obramowania tabeli.

Źródło

2012-02-25 08:25:27

to faktycznie odpowiada na pytanie OP ... – mmcrae

Na stole ustaw border-spacing: 0;, który usuwa spacje między krawędziami elementów potomnych TD.

Źródło

2012-02-25 08:25:59 steveukx

ratownik !, podstępne style stołów –

Używanie 'border-collapse: collapse;' pozostawia małe odstępy w moim stole, ale to wyeliminowało je. Dokładnie to, czego szukałem! – Jez

Dlaczego twoje życie komplikuje, kiedy można wykonać następujące czynności:

nawrócony word plik do pdf & przyjmującym go za pomocą HTML embed lub object tagów!

edit:http://jsfiddle.net/uday99/WzGeX/2/

Źródło

2012-02-25 08:30:57 uday

Częściowo chodzi o to, że ciągle tracę pliki .docx i zmuszam je do odtworzenia z nieprzeniknionego pliku pdf. Poza tym prawdopodobnie moja publiczność nie będzie mieć wtyczki pdf w przeglądarce. Wolałbym mieć tylko jeden plik vim-editable, który następnie mogę szybko przekazać serwerowi, zamiast przechodzić cały ten proces za każdym razem, gdy zauważam literówkę lub zyskuję doświadczenie. –

Zobacz ten przykład: chcesz powiedzieć, że chcesz coś takiego? Http: //jsfiddle.net/uday99/WzGeX/2/ – uday

W rzeczywistości http://jsfiddle.net/kFGmC/ jest prawie dokładnie tym, na co liczyłem. Po prostu nie myślałem, żeby traktować znaczniki '' jako elementy blokowe, którymi one są. –

Rezygnacja z tabeli jest lepszym pomysłem. Możesz zamienić nagłówki na elementy <h2> (lub dowolny inny poziom <h>) i pozostawić go w lewo i nadać tekstowi wystarczająco szeroki lewy margines.

Coś jak this jsfiddle, czy nie tego chcesz?

Źródło

2012-02-25 08:35:26

Doskonale, dziękuję! Po usłyszeniu The Right Thing zawsze wydaje się to takie oczywiste. –

Eliminowanie luki między pionowymi granicami tabeli <td> s

Odpowiedz

Powiązane problemy