CODEWITHSUNDEEP
htmlcss
CoderX
CoderX

Reputation: 1022

Is there a way to fix height of each row to a fixed of 10%?

I have the following css style which simply sets the styling stuff for the HTML table.

html
{
    height: 100%;
    width: 100%;    

} 

body
{
    line-height: 1.6em;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow: hidden;

}

#hor-minimalist-a
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    background: #fff;
    margin: 45px;
    width: 70%;
    height: 70%;
    border-collapse: collapse;
    text-align: left;
}
#hor-minimalist-a th
{
    font-size: 14px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{   
    color: #669;
    padding: 9px 8px 0px 8px;
}

#hor-minimalist-a tbody tr:hover td
{
    color: #009;
}

I have tried setting height property of th and also of td to 10%, but that doesnot work. If the number of rows get less, the rows automatically get larger instead of staying at the height of 10%.

The following HTML file is using the above mentioned CSS styling. Every thing seems to work fine except for the ROW length issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOOKS</title>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
        <tr>
            <th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>

</body>
</html>

How can I modify the CSS so that the height of ROWS stays fixed at 10% in any case.

Upvotes: 0

Views: 37

Answers (1)

Krystian
Krystian

Reputation: 987

I am not sure if you want to set width or height as you mentioned both. But you could try max-width: 10%; or an absolute value, as I am not sure, what your aiming exactly. You also could try using !important like width:10%!important;

Maybe this helps. If not you could provide a picture with your aim so we can understand better.

Upvotes: 1

Related Questions