Question

对于每一列，我要确保最小宽度等于该列元素中html的长度。

如果在下面的console.log x中，我得到每个文本元素的长度。但是当我在下面设置它时，它设置为0px。如果我手动输入$（this）.css（'min-width'，50），它将每个最小宽度设置为50。

如何将每个td的最小宽度设置为其自己的唯一文本长度？

        $('.table2excel td').each(function () {
            var x = this.innerText.length;
            $(this).css('min-width',x);
        })

Answer 1

我建议使用其他方法：

使用以下公式计算最大td
将此值设置为所有tds

var maxW = 0;
$('.table2excel td').each(function () {
    var x = this.innerText.length;
    if (x > maxW) {
        maxW = x;
    }
});
$('.table2excel td').css('min-width', maxW + 'px');

td{
  border: 1px solid #ddd;
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table2excel">
    <tbody>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>22</td>
    </tr>
    <tr>
        <td>333</td>
    </tr>
    <tr>
        <td>444</td>
    </tr>
    </tbody>
</table>

如何将列的最小宽度设置为等于最大文本宽度？

1 个答案: