根據文本更改不同td的寬度

我創建了一個表，現在我想根據文本更改td的寬度。但它不會對td產生影響。如果我改變第一個td的寬度，那麼它也會自動改變下一個tr「td」的寬度。我怎樣才能給html.Below不同td上的不同寬度是我的代碼。根據文本更改不同td的寬度

<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>

來源

2012-01-18 JN_newbie

請注意，width="150px"無效，請嘗試width="150"或style="width: 150px"代替。

如果我改變第一TD的寬度那麼它也自動地改變下一個TR「TD」

這是由設計的寬度;爲了獲得每個<tr>的<td>的不同寬度，您必須嵌套表格。

編輯

如果你要留在你當前的佈局，你應該使用colspan，使<td>的平衡：

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

來源

2012-01-18 05:43:51 stealthyninja

stealthyninja，我已經嘗試過了，你的第一個解決方案是通過嵌套表而不是與colspan一起工作的。你有什麼建議，要麼使用嵌套表或colspan，因爲與colspan它不起作用。 – 2012-01-18 07:45:44

@Java_NewBie - 使用嵌套表，如果它爲你工作並達到你想要的。 :-) – stealthyninja 2012-01-18 08:06:03

謝謝stealthyninja :) – 2012-01-18 09:35:33

嘗試是這樣的：

<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>

來源

2012-01-18 05:47:05

如果你在2月td增加寬度，你將不會對td產生任何影響，這個例子來自w3schools。 – 2012-01-18 05:56:08

Colspa ns很可能是你最好的選擇。有了這些，你不會被限制在每一行中具有相同的列寬。請看下面的示例：

<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>

來源

2012-01-18 06:45:53 BilalKat

假設你有每個全角字符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');});

來源

2013-05-09 04:33:46

根據文本更改不同td的寬度

回答

相關問題