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

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的评论：

  

基本上，如果更多行扩展，它应该减少，如果行减少则增加。

此处一个解决方案：

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

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

Answer 2

这是一个纯CSS解决方案：

/* default */
table tr {
    font-size: 20px;
}

/* one item */
table tr:first-child:nth-last-child(1) {
    font-size: 32px;
}

/* two items */
table tr:first-child:nth-last-child(2),
table tr:first-child:nth-last-child(2) ~ tr {
    font-size: 24px;
}

/* three items */
table tr:first-child:nth-last-child(3),
table tr:first-child:nth-last-child(3) ~ tr {
    font-size: 16px;
}

/* four items */
table tr:first-child:nth-last-child(4),
table tr:first-child:nth-last-child(4) ~ tr {
    font-size: 12px;
}

jsfiddle

您可以轻松地将选择器扩展到您喜欢的任何数量。

修改

如果您需要更通用的版本，您也可以使用循环（假设您使用Sass或类似的东西）：

$rowsToGenerate: 20;
$factor: 5;
$maxFontSize: 64px;
$minFontSize: 12px;

@for $i from 1 through $rowsToGenerate {
  @if($i == 1) {
    /* one item */
    table tr:first-child:nth-last-child(#{$i}) {
        font-size: $maxFontSize;
    }
  } @else {
    $fontSize: $maxFontSize - ($i * $factor);

    /* multiple items */
    table tr:first-child:nth-last-child(#{$i}),
    table tr:first-child:nth-last-child(#{$i}) ~ tr {
      @if($fontSize < $minFontSize){
        font-size: $minFontSize;
      } @else {
        font-size: $fontSize;
      }
    }
  }
}

Sassmeister