如何更改HTML表的td宽度？

Question

Here's my current code,

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

No matter how I change it, it doesn't work. I'm using the latest version of Firefox.

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

Answer 1

Try adding table-layout:fixed style to the table, as such,

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

to make the change more apparent.

However, using this setting will overflow the content into adjacent td .

Answer 2

Here is a working fiddle: http://jsfiddle.net/DEU7d/1/

The class .alt is getting added to 'even' rows on page load. (i added a color for .alt)

The class .over is getting toggled between mouse over and 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

First I would like say "THANK YOU" to everybody who put effort to help me out, especially thanks to "rae1n", "Deminoth Bono", "tristan" and "OMG" !!! all you guys effort help me figure out the issue and solve it.

First I use firefox "error console", I find a javascript issue which is sit there long time, then I fix it, but unfortunately our "Width" issue still there.

Second from "rae1n" and "OMG" post, I start to thought this may not an " width" issue, so I start to look around, after one day thinking......, finally I figure out the issue is at input type="text" tag. You know, if you do not give a width in the input type="text", it will render an textbox with fix width looks like 200px, this cause the issue. So what ever how I change the "td" percentage, it still keep same looking. So I add style="width:100%" into the input type="text"... , then change the "td" width, the "td" width show correct changing. the issue get fixed. Below code is how I correct it.

<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 %>"/>