locked
Shrinking table row height in HTML/CSS RRS feed

  • Question

  • Hello,

    Using HTML and CSS (NOT PowerPoint!), I’m developing lectures for my Ancient Greek and Latin students on my web site.  My problem is designing tables using either the <table> or <div> method.  In either case, the larger the cell’s font, the larger the border space surrounding the word.  I realize that in most cases this makes good aesthetic sense.  But often I need to show seven or more rows in a table without scrolling.  And I need large fonts for readability.  I don’t even need borders between the cells.  Here the CSS code for the <div> method.

    <style type="text/css">

            .Table {

                display: table;

                width: 50%;

                margin-

                margin-right: 25%;

            }

            .Title {

                display: table-caption;

                text-align: center;

                font-family: 'Lucida Console';

                font-weight: bold;

                font-size: 28px;

                color: red;

            }

            .Heading {

                display: table-row;

                font-weight: bold;

                text-align: center;

                font-family: 'Lucida Console';

                font-size: 28px;

            }

            .Row {

                display: table-row;

                font-family: 'Arial Unicode MS';

                padding-

                padding-bottom: 0px;

            }

       .Cell {

         display: table-cell;

         border: solid;

         border-width: 1px;

         padding-

         padding-right: 5px;

         font-size: 24px;

         height: 60px;

        }

    </style>

     

    <body>

        <div >

            <div>

                <p>First Declension Feminine Nouns</p>

            </div>

            <div style="width:50%">

                <div>

                    <p>Six Cases</p>

                </div>

                <div>

                    <p>Single</p>

                </div>

                <div>

                    <p>Plural</p>

                </div>

            </div>

     

    And for the HTML:

     

            <div>

                <div>

                    <p>Vocative</p>

                </div>

                <div>

                    <p>puella</p>

                </div>

                <div>

                    <p>puella</p>

                </div>

            </div>

     

            <div>

                <div>

                    <p>Nominative</p>

                </div>

                <div>

                    <p>puella</p>

                </div>

                <div>

                    <p>puella</p>

                </div>

            </div>

     

            <div>

                <div>

                    <p>Genitive</p>

                </div>

                <div>

                    <p>puellae</p>

                </div>

                <div>

                    <p>puellārum</p>

                </div>

            </div>

     

            <div>

                <div>

                    <p>Dative</p>

                </div>

                <div>

                    <p>puellae</p>

                </div>

                <div>

                    <p>puellīs</p>

                </div>

            </div>

     

            <div>

                <div>

                    <p>Accusative</p>

                </div>

                <div>

                    <p>puellam</p>

                </div>

                <div>

                    <p>puellās</p>

                </div>

            </div>

            <div>

                <div>

                    <p>Ablative</p>

                </div>

                <div>

                    <p>puellā</p>

                </div>

                <div>

                    <p>puellīs</p>

                </div>

            </div>

        </div>

    </body>

    </html>

     

    Since I’m going to record this slide, formatting for devices or interactive use plays no role.  I only need to shrink the top and bottom borders so that all rows can fit on one screen using a large font.

     

    Thanks for your help.  I’m just tired of banging my head against the wall.

     

    Oliphant

    Wednesday, November 25, 2015 3:41 PM