Question

我有以下css样式，它只是为HTML表设置样式内容。

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

我已经尝试将 th 和 td 的高度属性设置为10％，但这不起作用。如果行数减少，行会自动变大而不是保持在10％的高度。

以下HTML文件使用上面提到的CSS样式。除了ROW长度问题外，每件事似乎都能正常工作。

<!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>

如何修改CSS，以便ROWS的高度在任何情况下都保持在10％。

Answer 1

我不确定你是否想要设置宽度或高度。但你可以尝试max-width: 10%;或绝对值，因为我不确定，你的目标究竟是什么。您也可以尝试使用!important之类的width:10%!important;

也许这有帮助。如果没有，你可以提供一个符合你目标的图片，这样我们就能更好地理解。

有没有办法将每行的高度固定为固定的10％？

1 个答案: