2017-11-09 6 views
0

どのようにしてすべてのセルで同じ方法でテキストを整列させることができますか?あなたがすぐにリンクを持っている最初のセルの間にわずかな違いがあるのを見るならば。私はあなたが何ができるかテーブルセルのテキストの整列

$(document).ready(function(){ 
 
    $(".toggler").click(function(e){ 
 
     e.preventDefault(); 
 
     $('.cat'+$(this).attr('data-prod-cat')).toggle(); 
 
    }); 
 
});
td{ 
 
    display:block; 
 
    width:auto; 
 
    border:1px dotted red; 
 
    background-color:red; 
 
    color:white; 
 
    margin-bottom:10px; 
 

 
} 
 

 
@media only screen and (min-width: 70em) { 
 
    td{ 
 
    display:table-cell; 
 
    border:1px dotted red; 
 
    background-color:red; 
 
    color:white; 
 
    margin-bottom:0px; 
 
    } 
 
} 
 

 

 
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="5"> 
 
    <tbody> 
 
    <tr> 
 
     <td><table> 
 
     <tr><td><p>SOCIÉTÉS: 230</p></td></tr><tr><td><a href="#" class="toggler" data-prod-cat="1">+ En savoir plus</a></td></tr> 
 
      <tr class="cat1" style="display:none"> 
 
      <td>Part CAC 40 : 90</td></tr> 
 
      <tr class="cat1" style="display:none"> 
 
      <td>Part Filiales +100MK€: 120</td></tr> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td><p>CONTACT</p></td> 
 
     <td><p>EMAIL NOMINATIF</p></td> 
 
     <td><p>OPT OUT</p></td> 
 
     <td><p>LIGNES DIRECTES/MOBILES</p></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

答えて

0

応答側を乱すことなく、同じ行にしても、「同じサイズのセル」側(テーブルレイアウトのおかげで)するために私のタイトルだけであるだろう

CSS:

p, td{ 
    font-family:'Varela Round'; 
    font-weight:bold; 
    text-align:center; 
    } 

またちょうど側はあなたに注意してくださいだけでなく、テキスト-alignプロパティを持っているために、CSSへの要素TDあなたのJSのためにあなたの代わりに、彼らが提案するDOMはあなたにその文書レディ機能を示唆していないjqueryのドキュメントをロードされたとき、あなたのJSコードを実行する場合:

JS

$(function() { 
    $(".toggler").click(function(e){ 
     e.preventDefault(); 
     $('.cat'+$(this).attr('data-prod-cat')).toggle(); 
    }); 
}); 

jQueryのドキュメント:https://api.jquery.com/ready/

+0

Iあなたの助言に従って、私は違いが表示されません –

関連する問題