web-dev-qa-db-ja.com

テーブルがモジュールの中央に正しく配置されていません

ポートフォリオモジュールのテーブルが適切にセンタリングされていません。 chromeでは、Firefoxの場合は少し多すぎて右に多すぎます。アイデアはありますか？ポートフォリオのHTMLコードは次のとおりです。

<p style="text-align: center;"> </p>
<table style="height: 265px; margin-left: auto; margin-right: auto;" width="1013">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: center;">
<p><img src="images/quest_design_web_gallery_header.png" alt="" /></p>
<p> </p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><a href="img/image-1.jpg" data-lightbox="web" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-2.jpg" data-lightbox="web" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-3.jpg" data-lightbox="web" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: left;">
<p> </p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/quest_design_design_gallery_header.png" alt="" /></p>
<p> </p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><a href="img/image-1.jpg" data-lightbox="design" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-2.jpg" data-lightbox="web" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-3.jpg" data-lightbox="web" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td>   </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: center;">
<p> </p>
<p><img src="images/quest_design_image_gallery_header.png" alt="" /></p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><br /><a href="img/image-1.jpg" data-lightbox="image" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><br /><a href="img/image-2.jpg" data-lightbox="image" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><br /><a href="img/image-3.jpg" data-lightbox="image" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> </p>

どんな助けでも素晴らしいでしょう。

http://www.webbmaster.com.au/web-programs/questdesign/index.php/folio

joomla-3.xjhtml
1
Kyle

テンプレートCSSファイルに、テーブルのスタイルをオーバーライドしているスタイルがある可能性があります。

デフォルトでは、以下が機能します。

table {
    width: 500px;
    margin: 0 auto;
}

もちろん、クラスまたはIDをテーブルに割り当て、代わりにそれをターゲットにする必要があります。

または、次のようにdivでテーブルをラップできます。

<div style="text-align:center">    
   <table style="display: inline-table;">  

   </table>
</div>
1
Lodder