按钮自动调整为 0px x 0px

Question

我尝试在一个单元格中使用 ImageButton 做一个 table。

我的table是这样实现的：

<table class="features-table">
                <thead>
                           <tr>
                               <td></td>
                               <td>1</td>
                               <td>2</td>
                               <td>3</td>
                               <td>4</td>
                               <td>5</td>
                               <td>6</td>
                               <td>7</td>
                               <td>8</td>
                               <td>9</td>
                               <td>10</td>
                               <td>1</td>
                           </tr>
                </thead>
                        <tfoot>
                        </tfoot>
                <tbody>
            <div id="IDDIV" runat="server"></div>
                </tbody></table>

我通过向 div 添加 html 字符串来填充我的 table。这个字符串是用这样的方法生成的：

    private string buildHtmlTableString(List<Week> w)
    {
        string result = "";
        foreach (Week element in w)
        {
            string s = "<tr>" +
                        "<td> Week " + element.weekNumber + 
                        "</td>" +
                        "<td>" + element.1 + " €</td>" +
                        "<td>" + element.2 + " €</td>" +
                        "<td>" + element.3 + " €</td>" +
                        "<td>" + element.4 + "</td>" +
                        "<td>" + element.5 + " €</td>" +
                        "<td>" + element.6+ "</td>" +
                        "<td>" + element.7 +" €</td>" +
                        "<td>" + element.8 + "</td>" +
                        "<td>" + element.9 + " €</td>" +
                        "<td>" + element.10 + " €</td>" +
                        "<td>" + "<asp:ImageButton runat=\"server\" ID=\"" + element.1 + "\" Height=\"20px\" Width=\"20px\" OnClick=\"test_Click\" ImageUrl=\"~/detail.ico.ico\"></asp:ImageButton></td>" +
                        "</tr>";
            result = result + s;
        }
        return result;
    }

table的风格：

#main
{
    width: 960px;
    margin: 160px auto 0 auto;
    background: white;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 30px;
    border: 1px solid #adaa9f;
    -moz-box-shadow: 0 2px 2px #9c9c9c;
    -webkit-box-shadow: 0 2px 2px #9c9c9c;
}

/*Features table------------------------------------------------------------*/
.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;  
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 
}

.features-table td
{
  border-right: 1px solid #cdcdcd;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;
}

/*Body*/
.features-table tbody td
{
  text-align: center;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.features-table tbody td:first-child
{
  width: auto;
  text-align: left;
}


.features-table td:nth-child(1)
{
  background: #e7f3d4;  
  background: rgba(179,0,0,0.3);
}

/*Header*/
.features-table thead td
{
  background: rgba(144,144,144,0.15);
  font: bold 12px 'trebuchet MS', 'Lucida Sans', Arial;  
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 
}

.features-table thead td:first-child
{
  border-top: none;
}

/*Footer*/
.features-table tfoot td
{
  font: bold 1.4em Georgia;  
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child
{
  border-bottom: none;
}

我的问题是 table 中没有显示这些图像按钮。如果我用 chrome 分析我页面的 html 代码，我可以看到生成了标签，但是，我不知道为什么，我的按钮大小为 0px x 0px。也许你们中有人知道该怎么做？

Answer 1

我实际上并不知道问题所在，但您可以做一些变通，直到其他人找到解决方案。

不要添加按钮，只需添加图片，然后 link 使用动态参数将其添加到您的页面。就像你的周数一样。在你的链接文件中，你只需要分析参数，瞧，你知道哪个表库仑被按下了。

有兴趣查看其他解决方案！希望对您有所帮助！

Answer 2

<asp:ImageButton> 是一个 ASP.NET 服务器端控件...因此它需要由 ASP.NET.

创建

您不能仅使用 <asp:ImageButton> 创建一个字符串并期望系统将其识别为控件。我的猜测是，当您查看呈现的 HTML 时，您实际上看到的是 <asp:ImageButton> 而不是实际控件会产生的内容（即 <input type="image">）。

为了做你想做的事，你需要生成一系列控件，首先对普通文本使用 <asp:Literal>，然后对按钮使用 <asp:ImageButton>。

而不是使用 <div> 使用 <asp:PlaceHolder>.

然后大致像这样建立你的控件...

private void buildHtmlTableString(List<Week> w)
{
    var sb = new System.Text.StringBuilder();
    foreach (Week element in w)
    {
        sb.Append("<tr>");
        sb.AppendFormat("<td> Week {0}</td>", element.weekNumber);
        sb.AppendFormat("<td>{0} €</td>", element.1);
        ...
        sb.AppendFormat("<td>{0} €</td>", element.10);
        sb.Append("<td>");
        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal(sb.ToString()));
        sb.Length = 0;

        var imgBtn = new System.Web.UI.WebControls.ImageButton
        {
            ID = element.1.ToString(),
            Width = new System.Web.UI.WebControls.Unit(20),
            Height = new System.Web.UI.WebControls.Unit(20),
            ImageUrl = @"~/detail.ico"
        };
        imgBtn.Click += new System.Web.UI.ImageClickEventHandler(text_Click);
        myPlaceholder.Controls.Add(imgBtn);
        sb.Length = 0;

        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal("</td></tr>");
    }
}

此外，在 <tbody> 中有一个 <div> 是无效的 HTML，但上面的内容无论如何都删除了

Answer 3

您不能在不保持其结构的情况下在 table 中添加 div。正如您在 firebug 中看到的那样，您的 div 被 table 忽略并位于 body 内。结构应该是这样的。

<table class="features-table">
    <thead>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div id="IDDIV" runat="server"></div>
            </td>
        </tr>
    </tbody>
</table>

无法在没有图像的情况下测试你的代码，所以不确定这是否能解决问题，但我想你应该从这里开始，这会为你解决很多问题

按钮自动调整为 0px x 0px

Button automatically sizes to 0px x 0px

html

c#

asp.net

html-table

imagebutton