jquery - 根据表格中的行调整字体大小

Question

有没有办法根据行数自动调整单元格的字体大小？正如你所看到的，我使用了 100% 的宽度和高度。现在我喜欢根据行数增加字体大小(行数可以变化)。

例如:

   <table style="height:100%; width:100%" border="1">
     <tr>
        <th> Field 1 </th>
        <th> Field 2 </th>
        <th> Field 3 </th>
        <th> Field 4 </th>
     </tr>

     <tr> 
       <td> One </td>
       <td> Two </td>
       <td> Three </td>
       <td> Four </td>
     </tr>

     <tr> 
       <td> One </td>
       <td> Two </td>
       <td> Three </td>
       <td> Four </td>
     </tr>

     <tr> 
       <td> One </td>
       <td> Two </td>
       <td> Three </td>
       <td> Four </td>
     </tr>
  </table>

Answer 1

根据OP的评论:

Basically it should decrease if more more rows expanding, and increase if less rows.

这是一个解决方案:

jQuery(function($) {
    var nbRows = $('table').find('tr').length;
    var fontSize;
    switch(nbRows)
    {
        case 1: fontSize = 25;
            break;
        case 2: fontSize = 20;
            break;
        case 3: fontSize = 15;
            break;
        case 4: fontSize = 10;
            break;
        // and so on..
    }
    $('table').find('tr > td').css('font-size', fontSize + 'px');
});

我承认必须有一些更干净的方法来做到这一点。这是我第一个想到的。

<小时/>

编辑

也许是这样的:

jQuery(function ($) {
    var nbRows = $('table').find('tr').length;
    var factor = 100; // choose number that suits you best
    $('table').find('tr > td').css('font-size', 1 / nbRows * factor + 'px');
});

至少，这可以处理任何可能的行数。