Как отформатировать эту таблицу с помощью 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

Hows 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: 'table td, thead th: nth-child (n + 2)'? –

также есть ли способ уменьшить ширину столбцов таблицы (предпочтительно через CSS)? –

'table td' - это каждый' td', который спускается из 'table',', 'позволяет добавить еще один селектор,' thead th' - это каждый 'th', который спускается из' thead', ': nth -child (...) 'даст вам ребенка в указанной позиции,' n + 2' - необязательная формула, которую вы можете указать, которая в этом случае возвращает всех детей, пропустивших первый. – maksymiuk

Как отформатировать эту таблицу с помощью CSS?

ответ

Смежные вопросы