如何改变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

首先，我想说“谢谢”每个人谁付出了努力帮助我，特别是感谢"rae1n"，"Deminoth Bono"，“特里斯坦”和"OMG“！

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

第二，从"rae1n“和"OMG”帖子开始，我开始认为这可能不是“宽度”的问题，所以我开始环顾四周，经过一天的思考……，最后我发现问题出在输入文本“type=”标签上。你知道，如果你不给一个宽度的输入文本“type=”，它将呈现一个固定宽度的文本框看起来像200px，这导致了这个问题。这个问题得到了解决。下面的代码是我如何纠正它的。

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

Answer 2

尝试将table-layout:fixed样式添加到表中，这样，

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

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

Answer 3

这是一个有用的小提琴：http://jsfiddle.net/DEU7d/1/

在页面加载时，类.alt被添加到“偶数”行中。(我为.alt添加了一种颜色)

类.over在鼠标悬停和鼠标移出之间切换。

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>