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正在鼠标翻转和切换之间切换。

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”的帖子，我开始认为这可能不是一个“宽度”问题，所以我开始环顾四周，经过一天思考......，最后我弄清楚了问题在input type =“text”标签处。你知道，如果你没有在输入类型=“text”中给出宽度，它将呈现一个固定宽度看起来像200px的文本框，这会导致问题。那么无论我如何改变“td”百分比，它仍然保持相同的外观。所以我将style =“width：100％”添加到input 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 %>"/>

如何更改HTML表格td宽度？

3 个答案: