1

私は自分のhtmlページにテーブルを持っています。テーブルでは、最初のtrには画像があり、次のtrにはテキストがあり、IEとChromeブラウザではこのように見えます

ここに画像の説明を入力

しかし、Firefoxブラウザで使用すると、次のようになります。

ここに画像の説明を入力

td に CSS (text-align:center) を使用し、テーブルに (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 に答える