jquery - 如何更改 HTML 表格 td 宽度？

Question

这是我当前的代码，

$(document).ready(function () {
    $(".stripeMe tr").mouseover(function () {
        $(this).addClass("over");
    }).mouseout(function () {
        $(this).removeClass("over");
    });
    $(".stripeMe tr:even").addClass("alt");
});


<table class="stripeMe" width="100%">
    <tr>
        <td style="width:85%">Product Name</td>
        <td style="width:5%; text-align:right">Price (each)</td>
        <td style="width:5%; text-align:center">Quantity</td>
        <td style="width:5%"></td>
    </tr>

    <% foreach (var cart in Model.Carts) { %>
        <tr id="row-<%: cart.RecordID %>">
            <td>
                <%: Html.ActionLink(Model.pr.GetProduct(cart.ProductID).ProductName.Length > 52 ? (string)Model.pr.GetProduct(cart.ProductID).ProductName.Substring(0, 52) + "..." :  (string)Model.pr.GetProduct(cart.ProductID).ProductName, "Elaborate", "Product", new { ProductID = cart.ProductID, RecordID = cart.RecordID }, null)%>
            </td>
            <td style="text-align:right">
                <%: (string)String.Format("{0:F}",Model.pr.GetProduct(cart.ProductID).UnitPrice) %>
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-<%: cart.RecordID %>" value="<%: cart.Quantity %>"></input>
            </td>
            <td>
                <%: Ajax.ActionLink("Remove from Cart", "RemoveFromCart", new { RecordID = cart.RecordID }, new AjaxOptions {OnSuccess = "handleUpdate" })%>
            </td>
        </tr>
    <% } %>

    <tr>
        <td><hr />Total</td>
        <td align="right">
            <hr />
            <span id="cart-total"><%: (string)String.Format("{0:F}",Model.CartTotal) %></span>
         </td>
         <td align="center">
             <hr />
             <span id="cart-quantity"><%: Model.CartQuantity %></span>
         </td>
         <td><hr />&nbsp;</td>
     </tr>
 </table>

不管我怎么改，都不行。我正在使用最新版本的 Firefox。

<td style="width:85%">Product Name</td>

Answer 1

尝试table-layout:fixed为表格添加样式，例如，

<table class="stripeMe" width="100%" style="table-layout:fixed">

使变化更加明显。

但是，使用此设置会将内容溢出到相邻的td.

Answer 2

这是一个工作小提琴：http: //jsfiddle.net/DEU7d/1/

.alt 类在页面加载时被添加到“偶数”行。（我为 .alt 添加了颜色）

.over 类在 mouse over 和 out 之间切换。

CSS

.over { background:#88aa4d; }
.alt { color: #ff881a; }

JS

$(document).ready(function () {

$(".stripeMe tr").mouseover(function () {
    $(this).addClass("over");
}).mouseout(function () {
    $(this).removeClass("over");
});

$(".stripeMe tr:even").addClass("alt");
});

HTML

<table class="stripeMe" width="100%">
    <tr>
        <td style="width:85%">Product Name</td>
        <td style="width:5%; text-align:right">Price (each)</td>
        <td style="width:5%; text-align:center">Quantity</td>
        <td style="width:5%"></td>
    </tr>
        <tr id="row-1">
            <td>
                linktext1
            </td>
            <td style="text-align:right">
               price
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-1" value="12"></input>
            </td>
            <td>
                iink text2
            </td>
        </tr>
      <tr class="even" id="row-2">
            <td>
                linktext1
            </td>
            <td style="text-align:right">
               price
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-2" value="21"></input>
            </td>
            <td>
                iink text2
            </td>
        </tr>


    <tr>
        <td><hr />Total</td>
        <td align="right">
            <hr />
            <span id="cart-total">total</span>
         </td>
         <td align="center">
             <hr />
             <span id="cart-quantity">quantity</span>
         </td>
         <td><hr />&nbsp;</td>
     </tr>
 </table>

Answer 3

首先，我想对所有努力帮助我的人说声“谢谢”，特别感谢“rae1n”、“Deminoth Bono”、“tristan”和“OMG”！你们所有的努力帮助我找出问题并解决它。

首先我使用 Firefox 的“错误控制台”，我发现一个 javascript 问题在那里很长时间，然后我修复它，但不幸的是我们的“宽度”问题仍然存在。

第二个来自“rae1n”和“OMG”的帖子，我开始认为这可能不是一个“宽度”的问题，所以我开始环顾四周，经过一天的思考......，最后我发现问题出在输入类型=“文本”标签。你知道，如果你没有在输入 type="text" 中给出宽度，它会渲染一个固定宽度看起来像 200px 的文本框，这会导致问题。所以无论我如何改变“td”百分比，它仍然保持相同的外观。所以我将 style="width:100%" 添加到输入 type="text"... 中，然后更改“td”宽度，“td”宽度显示正确更改。问题得到解决。下面的代码是我如何纠正它。

<input type="text" disabled="disabled" style="width:100%; text-align:center; border-width:0; background-color:transparent" id="column-Quantity-<%: cart.RecordID %>" value="<%: cart.Quantity %>"/>