2013-02-18 26 views
6
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Superscript_size_in_table_cell</title> 
    <meta name="generator" content="BBEdit 10.5" /> 
    <style> 
    table { 
     width: 60%; 
    font-size: 0.8em; 
    margin-left:auto; 
    margin-right:auto; 
    border-collapse: collapse; 
    } 

    .super_script { 
    font-size: 80%; 
    vertical-align: super; 
    } 

    </style> 
</head> 
<body> 
    <table id="table_1a-27"> 
     <caption class="table_caption">Table 1A-27</caption> 
     <tr> 
      <td>Some text<span class="super_script">Note 1</span></td> 
     </tr> 
     <tr> 
      <td> 
       <ol> 
        <li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li> 
        <li>Some stuff here</li> 
       </ol> 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 

Chcę zmienić rozmiar i pozycję tekstu dla części zawartości komórki tabeli, ale powyższe wydaje się nie działać dla tekstu w komórce tabeli. Chciałbym móc dostosować rozmiar, jeśli elementy tabeli, nie tylko dla celów superscripting.Zmiana rozmiaru czcionki w komórce tabeli

+0

The 'span' elementu pojawi się w indeksie górnym położeniu w niemal nieczytelnym wielkości, zgodnie z wnioskiem w CSS. Więc jaki jest problem? Proszę określić, co "wydaje się niedziałać" oznacza, wyjaśniając oczekiwane renderowanie i jak faktyczne renderowanie (w jakiej przeglądarce (-ach)?) Różni się od tego. Zastanów się również nad opublikowaniem kompletnego, ważnego przykładu, który ilustruje rzeczywisty przypadek, w którym sensowne byłoby posiadanie długiego wyrażenia jako indeksu górnego. Zwróć uwagę, że tabelaryczne oznaczenia naruszają model tabeli HTML (i tak naprawdę nie wyglądają jak coś, co powinno być tabelą). –

+0

Dzięki za odpowiedź. Korzystając z Safari 6.0.2, oczekuję, że "Uwaga 1" i "Uwaga 2" będą renderowane w rozmiarze mniejszym od drugiego tekstu w komórce. Tworząc powyższy przykład zgodnie z sugestią, odkryłem, że może istnieć niższy limit rozmiaru czcionki renderowanej przez przeglądarkę. Ponieważ chcę, aby moje tabele były 0.8em od reszty treści, zmniejszenie rozmiaru tekstu w indeksie górnym mogło dodatkowo wpłynąć na dolny limit możliwości przeglądarki (lub "chęci") do zmiany rozmiaru tekstu. Już myśli są mile widziane. Pozdrawiam, Zephyr –

+0

Safari, a także kilka innych przeglądarek, ma opcję użytkownika do ustawienia minimalnego rozmiaru czcionki (i istnieją ku temu powody).Superskryptowanie w HTML (lub CSS) zazwyczaj słabo działa, więc pomocne byłoby wyjaśnienie prawdziwego celu. Superskrypty HTML są po prostu zredukowanymi podniesionymi znakami, a nie poprawnymi typograficznie, czytelnymi indeksami górnymi. –

Odpowiedz

1

to nie działa, ponieważ nie definiują klasę komórek wystarczy umieścić

class="super_script" 

w znaczniku TD.

aby zmienić rozmiar komórek upewnij się zrobić

table {table-layout: fixed;} 

i powinien być ustawiony!

+0

Dzięki za szybką reakcję! To by się udało, gdybym chciał, aby cała zawartość komórki była superskryptowana, ale chcę tylko, aby część zawartości komórki była dostosowana. Również "wielkość czcionki: 0.3em;" nie jest rozpoznawana w tabeli. Myśli? –

2

za podstawowy:

1- umieścić swoje 'super scenariusza' tekst w <sup>

2- stylu Twój <sup> ten sposób:

sup { 
    position: relative; 
    font-size: 75%; 
    line-height: 0; 
    top: -0.5em; 
    vertical-align: baseline; 
} 

także interesujących pytań wokół tego samego tematu:

[edytuj]: Niektórzy użytkownicy wymienić jakąś przeglądarkę zachowań 'Buggy' z względnego rozmiaru czcionki wielkości dla <sub> i <sup> narzutów.

Być może należy rozważyć utrzymanie się przy użyciu <span>

+0

Brak poprawy w praktyce. IE nieprawidłowo interpretuje 'rozmiar-czcionki' dla' sup' jako odnoszące się do domyślnego rozmiaru przeglądarki dla elementu, a nie (zgodnie ze specyfikacją) do rozmiaru czcionki elementu nadrzędnego. Dlatego ustawiając 'font-size' na' sup', wprowadzasz istotną zależność od przeglądarki. –

+0

@ JukkaK.Korpela: co rozumiesz przez "wprowadzenie podstawowej zależności od przeglądarki"? –

+0

w zgodnych przeglądarkach, otrzymujesz 75% rozmiaru elementu rodzica; w IE dostajesz 75% domyślnego rozmiaru czcionki "sup". W praktyce, na IE, reguła sprawia, że ​​rozmiar czcionki jest dużo mniejszy niż bez reguły, podczas gdy w Firefoksie staje się trochę * większy *. –