Question

我在LibreOffice中创建了下面的表格：

我尝试使用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吗？

Answer 1

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;
}

如何使用CSS格式化此表？

1 个答案: