Discussion :

[Pelote2012]

Bonjour

J'ai ce code qui fonction sous Chrome mais pas sous IE11. Je travaille avec jqueryui pour le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
tr td {
  text-align: center;
}
tr td .ui-icon {
  position: absolute;
  top: 35%;
  right: 5px;
}
tr.trheader {
  height: 35px;
  max-height: 35px;
  min-height: 35px;
}
td {
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  padding-right: 5px;
  padding-left: 5px;
  position: relative;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table class="ui-widget ui-widget-content ui-corner-top">
  <tr class="trheader">
    <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 110px; min-width: 110px; max-width: 110px;">Dte Naissance<i class="ui-icon ui-icon-carat-2-n-s"></i>
    </td>
    <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 100px; min-width: 100px; max-width: 100px;">Dte<i class="ui-icon ui-icon-carat-2-n-s"></i>
    </td>
  </tr>
</table>

http://jsfiddle.net/jbutler483/bfjyLvpc/1/

Merci de votre aide

[mathieu]

tu n'as pas expliqué ce qui ne fonctionne pas

[Pelote2012]

Première phrase

J'ai ce code qui fonction sous Chrome mais pas sous IE11.

J'ai un problème pour centrer verticalement du text et une image dans un td sous IE en résumé


BOn bref j'ai trouvé : http://jsfiddle.net/bfjyLvpc/8/

[NoSmoking]

Bonjour,
au final tu te retrouves avec une structure quand même assez exotique

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
  <tr>
    <td>
      <div style="display: table;">
        <div style="display: table-cell;">
        </div>
        <div style="display: table-cell;">
          <i></i>
        </div>
      </div>
    </td>
    <td>
      <div style="display: table;">
        <div style="display: table-cell;">
        </div>
        <div style="display: table-cell;">
          <i></i>
        </div>
      </div>
    </td>
  </tr>
</table>

[Pelote2012]

J'ai un peu simplifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
tr td{
        text-align: center;
}
tr.trheader{
        height: 35px;
        max-height: 35px;
        min-height: 35px;
}
td{
        border-style: solid;
        border-width: 1px;
        border-color: transparent;
        padding-right: 5px;
        padding-left: 5px;
}
div.hd{
        display: table-cell;
        vertical-align: middle;
}
div.hdtxt{
       height: 30px; 
       width: 90%;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table class="ui-widget ui-widget-content ui-corner-top">
    <tr>
        <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 110px; min-width: 110px; max-width: 110px;">
            <div class="hd hdtxt" >Dte Naissance</div>
            <div class="hd" ><i class="ui-icon ui-icon-carat-2-n-s"></i></div>
        </td>
        <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 100px; min-width: 100px; max-width: 100px;">
            <div class="hd hdtxt" >Dte</div>
            <div class="hd"><i class="ui-icon ui-icon-carat-2-n-s"></i></div>
        </td>
    </tr>
</table>

Mais si tu connais une autre méthode pour que ça marche avec IE,FF et Chrome... je veux bien