表のセル内のフォントサイズを変更する

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

表のセルの内容の一部のテキストのサイズと位置を変更したいが、表のセル内のテキストで上記のように動作しないようです。私はテーブル要素の場合は、サイズを調整できるようにしたいと思います。表のセル内のフォントサイズを変更する

出典

2013-02-18 Zephyr Mays

を使用して保つことを検討してください。それで問題は何ですか？「動作していない」とは、予想されるレンダリングを説明し、実際のレンダリング（どのブラウザで）と異なるのかを指定してください。また、長い句を上付き文字として使用するのが理にかなっている実際の例を示す完全で有効な例を投稿することを検討してください。テーブルマークアップはHTMLテーブルモデルに違反していることに注意してください（実際にはテーブルのように見えません）。 –

お返事ありがとうございます。 Safari 6.0.2を使用すると、「ノート1」と「ノート2」がセル内の他のテキストよりも小さいサイズでレンダリングされることが期待されます。あなたが提案した上記の例を作成すると、ブラウザがフォントをレンダリングするサイズの下限があるかもしれないことがわかりました。テーブルをコンテンツの残りの部分から0.8emにしたいので、上付きのテキストサイズをさらに小さくすると、ブラウザの能力の下限（または「意欲」）がテキストのサイズを変更する可能性があります。他の考えが大変ありがとうございます。よろしくお願いします。 Zephyr –

Safariは、他のブラウザと同様に、最小フォントサイズを設定するユーザーオプションがあります（これには非常に良い理由があります）。HTML（またはCSS）の上付き文字は一般的にうまく機能しない傾向がありますので、実際の目標を説明すると役に立ちます。 HTMLの上付き文字は、字下げ訂正された文字ではなく、読みやすい上付き文字です。 –

あなたがセルクラスを定義していなかったので、それが動作しないだけで、TDタグで

class="super_script"

を置きます。セルのサイズを変更する

あなたは

table {table-layout: fixed;}

を行うと、あなたが設定されるべきであることを確認してください！基本のために

出典

2013-02-18 17:11:01 Dotan

ありがとうございます。セルの内容をすべて上書きすることができたらうまくいくと思いますが、セルの内容の一部だけを調整したいと思っています。また、 'font-size：0.3em;'はテーブル内で認識されないようです。考えますか？ –

：また

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

同じテーマの周りの興味深い質問：

1- 

2 - スタイルであなたのこのように、あなたの 'スーパースクリプト' テキストを配置

[編集]：一部のユーザーがとマークアップのためのフォントサイズの相対的なサイズで「バギーの行動をいくつかのブラウザを述べました。

おそらく、あなたはあなたのCSSに要求されるように、 `span`要素は、ほとんど読めない大きさで上付き文字の位置に表示されます

出典

2013-02-18 18:23:18

実際には改善はありません。 IEは、要素のブラウザのデフォルトサイズに関連して、（仕様に従って）親のフォントサイズに関係なく、 'sup'の' font-size'を間違って解釈します。したがって、 'sup'に' font-size'を設定することによって、ブラウザの依存性が重要になります。 –

@ JukkaK.Korpela：あなたは「あなたは本質的なブラウザの依存関係を導入しますか？」とはどういう意味ですか？適合するブラウザでは –

、親要素のサイズの75％を取得します。 IEでは、デフォルトの 'sup'要素のフォントサイズの75％を取得します。実際には、IEでは、ルールはフォントサイズをルールなしではるかに小さくしますが、Firefoxでは少し大きくなります*。 –

表のセル内のフォントサイズを変更する

答えて

関連する問題