有沒有辦法將每一行的高度固定爲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％？

回答

相關問題