インラインブロック表示のテーブル内の行に不要な空白セルがあります

2つのテーブルを並べて表示したいのですが、だから私はdisplay: inline-blockと表示スタイルのプロパティを設定します。問題は、両方のテーブルで、列がテーブルの全幅を占めていないことです。目に見えない細胞があります。面白いことに、ページ上部からDOCTYPE HTML行を削除すると、これは起こりません。スクリーンショットの赤い印がついた部分が私の心配です。インラインブロック表示のテーブル内の行に不要な空白セルがあります

"tr"のフォントサイズを0に設定して、 "td"に希望するフォントサイズを追加しようとしました。また、負の右側のパディング/マージンを追加しようとしましたが、動作させることができませんでした。提案してください！表の右側にある

空のセル：

Empty cells at the right of table

<table id="attn" style="display: inline-block; border: 1px solid green"> 
     <tr> 
      <td > 
       Attn: Mr. HM. Mustafizur Rahaman 
       <footer>Vice President</footer> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Attn: Mr. HM. Mustafizur Rahaman 
       <footer>Vice President</footer> 
      </td> 
     </tr> 
</table> 

<table id="register" style="display: inline-block; border: 1px solid blue"> 
     <caption id="cap_tab_1">Invoice<caption> 
     <thead> 
      <tr> 
       <td>No.</td> 
       <td colspan="2">SSL/16/02011</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td style="width: 25%"> 
        Day 
       </td> 
       <td style="width: 40%"> 
        Month 
       </td> 
       <td style="width: 35%"> 
        Year 
       </td> 
      </tr> 
    </tbody> 
</table>

出典

2016-09-27 Yeasir Arafat Majumder

'display：inline-table' – 3rdthemagical

@ 3rdthemagical：ありがとう！それは動作するようです！あなたのコメントを投票しましたが、特典はまだありません！ –

質問の回答を追加しました。役に立つと思われる場合は、それを有用とマークできますか？ – 3rdthemagical

あなたの代わりにdisplay: inline-blockのdisplay: inline-tableを使用することができ、問題を解決するには。

説明：デフォルトで<table>が表示プロパティdisplay: tableを受けます。これは、行/列を整理し、ページ上にどのように表示されるかを決定する方法です。

display: inline-blockに変更した瞬間、<table>は、そのプロパティがCSSに従って適切なテーブルであることを失います。したがって、 <td>などは、display: inline-block要素内で実行しないでください。そのため、display: inline-tableが問題を解決しています。

出典

2016-09-27 12:01:56 3rdthemagical

-1

何フロートの代わりに、インライン程度。 IE、Chrome、Firefoxで私のために働いた。

<!DOCTYPE html> 

<table id="attn" style="float:left; border: 1px solid green"> 
    <tr> 
     <td > 
      Attn: Mr. HM. Mustafizur Rahaman 
      <footer>Vice President</footer> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Attn: Mr. HM. Mustafizur Rahaman 
      <footer>Vice President</footer> 
     </td> 
    </tr> 
</table> 

<table id="register" style="float:left; border: 1px solid blue"> 
    <caption id="cap_tab_1">Invoice<caption> 
    <thead> 
     <tr> 
      <td>No.</td> 
      <td colspan="2">SSL/16/02011</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="width: 25%"> 
       Day 
      </td> 
      <td style="width: 40%"> 
       Month 
      </td> 
      <td style="width: 35%"> 
       Year 
      </td> 
     </tr> 
</tbody> 
</table>

出典

2016-09-27 07:49:52

ありがとうございますが、私はテーブルを扱うソリューションを探していました。 –

インラインブロック表示のテーブル内の行に不要な空白セルがあります

答えて

関連する問題