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

我有以下CSS样式，它只是设置HTML表格的样式。有没有办法将每一行的高度固定为10％？

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

我已经尝试设置日并且还TD至10％，但不列入工作height属性。如果行数减少，行自动变大，而不是停留在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％。

来源

2017-08-09 CoderX

你希望每行都是'10％'父母的高度？但是你有8行，'10％* 8'如何在'100％'中分配？如果行数改变怎么办？预期的行为是什么？ –

嗯，我会实现分页，一次最多10行，如果有8行，我只想要20％的空间是空的，等等。 – CoderX

我相信做到这一点的最佳方式是将空行填入该位置。通过这种方式，UI始终设置为一次处理10行，但您可以只填写所需行所需的数据，而不是根据每种情况调整UI（尤其是如果要使用百分比，如果是7行，将会发生什么？6？您不想为每个行写一个案例）。 –

我不确定是否要设置宽度或高度，因为您提到了两者。但是，您可以尝试max-width: 10%;或绝对值，因为我不确定，您的准确瞄准方式。你也可以尝试使用!important像width:10%!important;

也许这会有所帮助。如果不是，你可以提供一个你的目标图片，这样我们可以更好地理解。

来源

2017-08-09 00:25:59

嗯，我会实现分页，一次最多10行，如果有8行，我只想要20％的空间是空的，等等。所以我想要每行10％的最大高度....但是，即使'最大高度：10％';也没有工作。 – CoderX

你可以把你的HTML和CSS到codepen吗？我不确定你是否已经尝试过了：把它直接放在html –

这里是链接： https://codepen.io/codernewx/pen/JyNobV – CoderX

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

回答

相关问题