Question

我想知道如何让我的文本在每个单元格中以相同的方式对齐和居中。因为如果你看到第一个获得链接的单元格之间存在细微差别。我的标题是在同一条线上，而不会打扰响应方和“相同大小的单元格”一侧（由于表格布局）

$(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>

Answer 1

你可以做的只是css的元素td以及text-align属性：

CSS：

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

如果你想在加载DOM时运行你的js代码，你只需要注意你的js jquery docs并不建议你使用文档就绪函数，而是建议：

JS

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

Jquery文档：https://api.jquery.com/ready/

表格单元格的对齐文本

1 个答案: