1

我的 html 页面中有一个表格，在表格中第一个 tr 有图像，下一个 tr 有文本，它在 IE 和 Chrome 浏览器中看起来不错，就像这样

在此处输入图像描述

但是当我在 Firefox 浏览器中使用时，它看起来像这样：

在此处输入图像描述

我只是将 CSS (text-align:center) 用于 td，将 (border-collapse: collapse,width: 100%) 用于表格，仅此而已......

我的html代码：

<table class="foottable" border="0" cellpadding="0" cellspacing="1">
                <tr>
                    <td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
                    <td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
                    <td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
                    <td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
                    <td class="foottabcen"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></td>
                    <td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
                </tr>
                <tr>
                    <td class="foottabcen">Select all</td>
                    <td class="foottabcen">Export to excel</td>
                    <td class="foottabcen">Mail</td>
                    <td class="foottabcen">SMS</td>
                    <td class="foottabcen">Graph</td>
                    <td class="foottabcen">Print</td>
                </tr>
            </table>

我的 CSS 代码：

.foottable
{
    width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;background: white;
}
.foottabcen
{
    color:black;text-align: center;
}

请帮我.........

4

3 回答 3

2

不知道为什么要这样做，但我想更好的方法是将图像和文本放在同一个 td 中，例如：

<td>
 <a href="#">
   <span><img src="images/exl_icon.png" alt="" /></span>
   <small>Export to excel</small>
 </a> 
</td> /* <a> is added considering these are clickable elements */

display:block;并通过您的 CSS应用于“a”、“span”和“small”。

并且可能最好的方法是在 td 中使用文本作为链接并为其添加一个特定于图标的类：

<td>
 <a href="#" class="ico_excel">Export to excel</a>
</td>

在你的css中它看起来像这样：

 .ico_excel{
    display:block; 
    text-align:center;
    padding-top: x px; /* x should be more than the height of the icon */
    background: transparent url(images/exl_icon.png) center top no-repeat;
    }
于 2013-03-30T07:35:47.303 回答
1

尝试这个

    <table class="foottable" border="0" cellpadding="0" cellspacing="1">
            <tr>
                <td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
                <td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
                <td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
                <td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
                <td class="foottabcen"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></td>
                <td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
            </tr>
            <tr>
                <td class="foottabcen1">Select all</td>
                <td class="foottabcen1">Export to excel</td>
                <td class="foottabcen1">Mail</td>
                <td class="foottabcen1">SMS</td>
                <td class="foottabcen1">Graph</td>
                <td class="foottabcen1">Print</td>
            </tr>
        </table>

和 css ...根据您的要求为foottabcen 提供高度

 .foottable
 {
     width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;
     background: white;
   }
 .foottabcen
 {
     color:black;text-align: center;height:50px;
    }
   .foottabcen1
{
color:black;text-align: center;
  }

在这里查看演示..... http://jsfiddle.net/dBFfd/

于 2013-03-30T07:41:53.283 回答
1

你试过这个吗...

<table>
    <tr>
        <td>
            <img id="check" src="images/unchecked.png"/>
            <span>sample</span>
        </td>
    </tr
</table>

但是，如果您想要我的免费助手，只需通过电子邮件发送您的代码，我会尝试修复它....

于 2013-03-30T09:14:03.303 回答