Question

我创建了一个表，现在我想根据文本更改td的宽度。但它对td没有影响。如果我改变第一个td的宽度，那么它也会自动改变下一个tr“td”的宽度。如何在html中的不同td上给出不同的宽度.Below是我的代码。

<div style="width:100%;">
    <table border="1">
        <tr>
            <td style="font-weight:bolder;" width="150px"><span id="lblStockName"></span></td>
        </tr>
        <tr>
            <td style="font-weight:bolder;" width="30px">Bid:</td>
            <td><span id="lblBid"></td>
            <td></td>
            <td style="font-weight:bolder;">Ask:</td>
            <td><span id="lblAsk"></td>
            <td></td>
            <td style="font-weight:bolder;">Spot:</td>
            <td><span id="lblSpot"></td>
            <td></td>
            <td style="font-weight:bolder;">Hi:</td>
            <td><span id="lblHi"></td>
        </tr>
        <tr>
            <td><span id="lblLimit"></td>
            <td></td>
            <td style="font-weight:bolder;">Last:</td>
            <td><span id="lblLast"></td>
            <td></td>
            <td style="font-weight:bolder;">Ch:</td>
            <td><span id="lblCh"></td>
            <td></td>
            <td style="font-weight:bolder;">Vol:</td>
            <td><span id="lblVol"></td>
            <td></td>
            <td style="font-weight:bolder;">Low:</td>
            <td><span id="lblLow"></td>'
        </tr>
    </table>
</div>

Answer 1

请注意，width="150px"无效，请尝试width="150"或style="width: 150px"。

如果我改变第一个td的宽度，那么它也会自动改变下一个tr“td”的宽度

这是设计上的;要为每个<tr>的{{1}}组获得不同的宽度，您必须嵌套表。

修改

如果您要使用当前版面，则应使用<td>以便colspan平衡：

<td>

Answer 2

尝试这样的事情：

<table border="1" width="100%"> --> the whole table is 100%!
  <tr>
<th>Month</th>
<th>Savings</th>
 </tr>
 <tr>
<td width="70%">January</td> --> then you chunk the td accordingly!
<td width="30%">$100</td>
 </tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Answer 3

Colspans很可能是你最好的选择。使用这些，您不必限制每行中具有相同的列宽。请看下面的示例：

<table border="1" width="200">
    <tr>
        <td>pqr</td><td>stu</td><td>vwx</td><td>yz</td>
    </tr>
    <tr>
        <td colspan="2">pqr</td><td>stu</td><td>vwx</td>
    </tr>
    <tr>
        <td>pqr</td><td colspan="3">stu</td>
    </tr>
</table>

Answer 4

假设每个全角字符有11个像素，那么您可以获得跨越的最大宽度：

$('.td-class').each(function(){length = (length < $(this).text().trim().length * 11 ? $(this).text().trim().length * 11 : length);});

将宽度指定给单元格

$('.td-class').each(function(){$(this).css( 'min-width', length + 'px' );});

根据文本更改不同td的宽度

4 个答案: