CSSを使用してこのテーブルをフォーマットするにはどうすればよいですか？

私はLibreOfficeの中で、以下に示す表を作成しました：CSSを使用してこのテーブルをフォーマットするにはどうすればよいですか？

私はこれは私がこれまで持っているもので、HTML5/CSSを使用してこの表を作成しようとしましたが、私はテーブルを作成するのに苦労しています上記のCSSスタイルを使用します。

これは私がこれまで持っているものである。このため

<doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Condensed"> 
    </head> 
    <body> 
     <style type="text/css"> 
      body { 
       font-family: 'Roboto Condensed', san-serif; 
       font-size: 20px; 
      } 

      table{ 
       border-collapse:collapse; 
       border:1px solid #000000; 
      } 

      table td{ 
       border:1px solid #000000; 
       text-align:center; 
       vertical-align:middle;   
      }   

      table caption { 
       margin-bottom: 20px; 
      } 

      th.table-heading { 
       transform: rotate(-90deg); 
       font-variant: small-caps; 
       text-align: left; 
       min-width: 100px; 
      } 

      .vert-center { 
       display: table-cell; 
       vertical-align: middle; 
      } 
     </style> 


     <table class="foo"> 
      <caption> 
      The caption for the table below goes here 
      </caption> 
      <thead> 
       <tr> 
        <th style="border: none;"> 
        <th class="table-heading">column<br>One 
        <th class="table-heading">column<br>Two 
        <th class="table-heading">column<br>Three 
        <th class="table-heading">column<br>Four 
        <th class="table-heading">column<br>Five 
        <th class="table-heading">column<br>Six 
        <th class="table-heading">column<br>Seven 
        <th class="table-heading">column<br>Eight 
       </tr> 
      </thead> 
      <tfoot> 
       <!-- summary information about table goes here. --> 
       Table footer information here 
      </tfoot>  
      <tbody> 
       <tr> 
        <td>Jan-80 
        <td class="col1 vert-center">100.0 
        <td class="col2">102.0 
        <td class="col3">103.0 
        <td class="col4">104.5 
        <td class="col5">107.8 
        <td class="col6">106.5 
        <td class="col7">104.7 
        <td class="col8">102.3 
       </tr> 
      </tbody> 
     </table> 

    </body> 
</html>

JSFiddleはhereです。ご覧のとおり、はありませんは意図した表のようです。画像に表示されているテーブルを再作成するために必要なCSSを誰かに教えてもらえますか？

出典

2017-02-02 Homunculus Reticulli

後this one？

テーブルヘッドの高さを調整し、ラベルからブレークを削除し、テーブルの枠を削除し、個々のセルの枠線を付けました。次のように

新しいCSSは次のとおりです。

body { 
    font-family: 'Roboto Condensed', san-serif; 
    font-size: 20px; 
} 

table{ 
    border-collapse:collapse; 
} 

table td, thead th:nth-child(:first-child) { 
    border:1px solid #000000; 
    text-align:center; 
    vertical-align:middle;   
}   

table caption { 
    margin-bottom: 20px; 
} 

thead tr { 
    height: 100px; 
    padding: 10px; 
} 

th.table-heading { 
    transform: rotate(-90deg); 
    font-variant: small-caps; 
    text-align: left; 
} 

.vert-center { 
    display: table-cell; 
    vertical-align: middle; 
}

出典

2017-02-02 20:34:05 maksymiuk

感謝！これは**まさに**私がやろうとしていたものです！あなたはこのCSSルールを説明してください： 'テーブルtd、theth th：nth-child（n + 2）'？ –

また、テーブルの列の幅を小さくする方法はありますか（CSS経由が好ましい）？ –

'table td'は' table'の下降するすべての 'td'です、'、 'は別のセレクタを追加することができます、' theadth'は 'thead'の下降するth番目ごとです：' nth -child（...） 'は指定された位置に子を与え、' n + 2'は指定できるオプションの式です。この場合、最初のものをスキップするすべての子を返します。 – maksymiuk

CSSを使用してこのテーブルをフォーマットするにはどうすればよいですか？

答えて

関連する問題